ThemeShaper Forums » Thematic

[closed]

Help Adding an Image Border!

(10 posts)
  • Started 9 years ago by jamesObZ
  • Latest reply from helgatheviking
  • This topic is not resolved

Tags:

  1. Hi,

    I am trying to add a border to my images but when i select the option to add a border within the image properties nothing happens. I am guessing this is because some CSS code is over riding it?

    Please help me resolve this, i have limited knowledge about code!
    FYI, my site can be found here: http://www.keyword-elite-reviewed.com/

    Many thanks,
    James

    Posted 9 years ago #
  2. If anyone could help me out here it would be greatly appreciated.

    Posted 9 years ago #
  3. Keep it simple. You have lots of different CSS classes for you images depending on alignment, I suspect you were choosing the wrong one. Get rid of them and adjust their position within Wordpress when you upload. So, get rid of:

    .aligncenter, img.aligncenter {
    clear:both;
    display:block;
    margin-left:auto;
    margin-right:auto;
    }
    

    ...Etc and so on. Once you have done that, something like:

    .entry-content img {
    border:10px solid #000;
    }
    

    should work.

    Posted 9 years ago #
  4. Hi,

    I am not too sure what to do here. If you could be so kind please:

    1. Tell me all the CSS code i should remove.
    2. Tell me all the code i need to add and where it should be added (what filenames etc)
    3. What code to insert etc to enable me to active the new CSS etc

    Many thanks!

    Posted 9 years ago #
  5. nickbernier
    Member

    Hi, just had a quick look at it. PSFlannery's suggestion is right, in your child theme's style.css add this:
    .entry-content img {
    border:10px solid #000;
    }

    Change the CSS to your needs, but basically with a child theme you only need to add what you want to make different. IE: in this case change .entry-content img css only. Don't mess around with deleting .aligncenter etc...

    Try just adding that new specification for .entry-content img. Using Firefox and the firebug plugin, right click on your image and you'll see exactly what is influencing the styling. (ie: .aligncenter img will show up first then .entry-content.

    I had a hard time wrapping my head around the child theme concept, I thought all the CSS had to be re-written, but you want to do the complete opposite and cause the least amount of changes as possible to achieve you goal.

    In summary:

    - Firefox or Safari with the Firebug plugin and "inspect" your current site and the image in question. It will tell you a lot.
    - Only add the .entry-content img css changes you want to change.
    - Finally, using firebug, you'll see that Wordpress has given your image a unique class of wp-image-73 which you can use to style that one specific image. Not really great, but will work in a pinch!

    Nick

    Posted 9 years ago #
  6. Hey Nick,

    Thanks for the response. To be honest i have never really understood this child theme concept. I have been making all changes to the original files.

    Are you saying that for any change i need to make i should be doing it within the child theme? Or is this just for additions? As there are only 2 files there. Style.css and functions.php

    Posted 9 years ago #
  7. nickbernier
    Member

    The safest way to go about things is to make a copy of the sample child theme folder located inside of Thematic's folder. Then rename the folder to what you want you theme to be. Now go inside your newly renamed folder and open up style.css. You'll see header info at the top, modify that to your liking, ie: give it your own theme name, put your name etc...

    " Make sure you did this with a clean "Thematic" install!!! or else your previous mods will change things"

    Go into your Wordpress admin panel, and you should now see a new available theme, the one you just created. Even if there is nothing new in the style.css or functions.php! Change your theme to that one before starting any of your edits. The goal of a child theme is to never, ever touch the parent theme. This way, if Thematic releases a new version, you simply upload the new version replacing the old one and your child theme should remain unaffected.

    ----

    The functions.php is used to add, remove or edit what Thematic does out of the box. ie: add a new <div> in the header or footer. Remove the entire drop down menu etc... If all you want to do is change the look and make minor adjustments that are all CSS based, then you don't need to touch the functions.php file, only style.css.

    You see what happens is that your theme folder, style.css file inside it points to the main "thematic" folder. Wordpress sees that and uses everything from the original thematic folder and styles ..... unless you add your own css twists in your child theme's style.css file. So using Firebug, rigth-click on anything on your blog and it will "inspect" it and return the section of code and its appropriate CSS. Because CSS (cascading style sheet) inherits, your theme inherits all the default "Thematic" css definitions. Say "thematic" styles "h2.entry-title" a widht a font size of 11px and you want it to be 16px. All you need to add to your style.css is:
    h2.entry-title {font-size:16px;} If your style.css depends on new images you created such as buttons or background images, then create a "images" folder inside your own child theme folder and link to them.

    That's it, wordpress will keep all the other css definitions and "update" the font-size only!

    It gets kinda weird when you use the functions.php file and manipulate the many "hooks" in Thematic. I had a hard time grasping the whole context. But within a month of reading posts / tutorials on this forum I was able to put this together: http://www.daniellelynnphotography.com/blog/ Its my wife photo blog, I only do this as a hobby so I'm pretty proud about it!

    Nick

    Posted 9 years ago #
  8. Hi Nick,

    I understand now, that was very helpful - thanks a lot!
    I will get arou8dn to fixing the imaging later, I have nearly got everything back to how it was editing it all correctly this time now :)

    By the way, nice site - looks smart, and some lovely high quality pics!

    Posted 9 years ago #
  9. nickbernier
    Member

    Thanks, the site is still a work in progress but it was really neat to put together as I had to take advantage of the functions.php and the hooks. Added my own widget areas at the bottom in the footer and social icons at the top.

    Keep working at it, lots of great people on this forum willing to help.

    Posted 9 years ago #
  10. sounds like you need to check out some tutorials on child theming in general.

    here is a good place to start:
    http://www.catswhocode.com/blog/wordpress-how-to-easily-create-a-thematic-child-theme

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.