Remove Border Around Images (Logo, headers, etc…)
-
Hello, I need to remove the borders from all the images. I have created a child theme to see if I can somehow change how the wordpress template looks. so far I haven’t been able to do much…. I have the a style.ccs page with this information:
/*
Theme Name: global_fresh_america
Description: Child theme for the twentytwelve theme
Author: Your name here
Template: twentytwelve
*/@import url(“../twentytwelve/style.css”);
Can I add a code this page so I don’t have any borde in my website?
Thank you
-
Yes, you can. Try using Firefox with the Firebug add-on to locate the CSS that you need to over-write in your child theme. Or use whatever developer tool is available in your web browser.
Thank you esmi. That add-on sounds like a good one but I don’t know what I should look for. So far I have 2 files in my child theme: style.css and header.php.
The header.php has some code to make the logo appear on top of the image header and nothing else.
Instead of over-write a code, shouldn’t I be writing a code that makes every image without the border? or at least a white border? (Because the background of my website is white)
(I’m sorry if I am asking for stupid questions, I’m really new here and I’m learning)
shouldn’t I be writing a code that makes every image without the border?
Yes – that’s what CSS is for – although the exact CSS you’ll need to add to your child theme’s style.css file will very much depend upon what CSS the parent theme used in the first place.
Ok. do you know the code that I should use? Should I send you more information so you can know what I should do?
Please let me know ??
What CSS have you found out through Firebug?
#colorbox, #cboxOverlay, #cboxWrapper { left: 0; overflow: hidden; position: absolute; top: 0; z-index: 99999; } #cboxOverlay { height: 100%; position: fixed; width: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { border: 0 none; display: block; float: left; margin: auto; } .cboxIframe { border: 0 none; display: block; height: 100%; width: 100%; } #colorbox, #cboxContent, #cboxLoadedContent { } #cboxOverlay { background: url("../images/overlay.png") repeat scroll 0 0 transparent; } #colorbox { } #cboxTopLeft { background: url("../images/controls.png") no-repeat scroll -101px 0 transparent; height: 21px; width: 21px; } #cboxTopRight { background: url("../images/controls.png") no-repeat scroll -130px 0 transparent; height: 21px; width: 21px; } #cboxBottomLeft { background: url("../images/controls.png") no-repeat scroll -101px -29px transparent; height: 21px; width: 21px; } #cboxBottomRight { background: url("../images/controls.png") no-repeat scroll -130px -29px transparent; height: 21px; width: 21px; } #cboxMiddleLeft { background: url("../images/controls.png") repeat-y scroll left top transparent; width: 21px; } #cboxMiddleRight { background: url("../images/controls.png") repeat-y scroll right top transparent; width: 21px; } #cboxTopCenter { background: url("../images/border.png") repeat-x scroll 0 0 transparent; height: 21px; } #cboxBottomCenter { background: url("../images/border.png") repeat-x scroll 0 -29px transparent; height: 21px; } #cboxContent { background: none repeat scroll 0 0 #FFFFFF; overflow: hidden; } .cboxIframe { background: none repeat scroll 0 0 #FFFFFF; } #cboxError { border: 1px solid #CCCCCC; padding: 50px; } #cboxLoadedContent { margin-bottom: 28px; } #cboxTitle { bottom: 4px; color: #949494; left: 0; position: absolute; text-align: center; width: 100%; } #cboxCurrent { bottom: 4px; color: #949494; left: 58px; position: absolute; } #cboxSlideshow { bottom: 4px; color: #0092EF; position: absolute; right: 30px; } #cboxPrevious { background: url("../images/controls.png") no-repeat scroll -75px 0 transparent; bottom: 0; height: 25px; left: 0; position: absolute; text-indent: -9999px; width: 25px; } #cboxPrevious:hover { background-position: -75px -25px; } #cboxNext { background: url("../images/controls.png") no-repeat scroll -50px 0 transparent; bottom: 0; height: 25px; left: 27px; position: absolute; text-indent: -9999px; width: 25px; } #cboxNext:hover { background-position: -50px -25px; } #cboxLoadingOverlay { background: url("../images/loading_background.png") no-repeat scroll center center transparent; } #cboxLoadingGraphic { background: url("../images/loading.gif") no-repeat scroll center center transparent; } #cboxClose { background: url("../images/controls.png") no-repeat scroll -25px 0 transparent; bottom: 0; height: 25px; position: absolute; right: 0; text-indent: -9999px; width: 25px; } #cboxClose:hover { background-position: -25px -25px; } .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { } .cboxIE6 #cboxTopLeft { background: url("../images/ie6/borderTopLeft.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxTopCenter { background: url("../images/ie6/borderTopCenter.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxTopRight { background: url("../images/ie6/borderTopRight.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxBottomLeft { background: url("../images/ie6/borderBottomLeft.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxBottomCenter { background: url("../images/ie6/borderBottomCenter.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxBottomRight { background: url("../images/ie6/borderBottomRight.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxMiddleLeft { background: url("../images/ie6/borderMiddleLeft.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxMiddleRight { background: url("../images/ie6/borderMiddleRight.png") repeat scroll 0 0 transparent; } .cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight { }
Please post a link to your site for help with CSS issues.
Try adding this to your child theme style.css file:
.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image { border-radius: 0 0 0 0; box-shadow: none; }
WOW!!!!! You are the best!!! it worked ??
If I have another question about something else, should I open a new post or I can ask here?
It’s best to open a new thread on a new question – you’ll get a faster reply and it helps other people find threads by topic.
Thank you WPyogi and others for your help.
Take care ??
- The topic ‘Remove Border Around Images (Logo, headers, etc…)’ is closed to new replies.