ThemeShaper Forums Tag: images

ThemeShaper Forums Tag: images http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sat, 04 Feb 2012 04:10:57 +0000 helgatheviking on "Full Screen Header/Body/Footer Image" http://themeshaper.com/forums/topic/full-screen-headerbodyfooter-image#post-24920 Mon, 16 Jan 2012 19:37:35 +0000 helgatheviking 24920@http://themeshaper.com/forums/ sorry, don't follow you. can't you just put 1 large background on the body? or #wrapper? perhaps you could create a diagram or screenshot to better explain. crashprojects on "Full Screen Header/Body/Footer Image" http://themeshaper.com/forums/topic/full-screen-headerbodyfooter-image#post-24916 Mon, 16 Jan 2012 04:20:20 +0000 crashprojects 24916@http://themeshaper.com/forums/ I'm building on Thematic, and I'd like to use a background image for my entire site; header, body, and footer. I'd like to utilize all of the screen real estate, and not just the real estate specified in the thematic dimensions. Can anyone tell me: a: what dimensions should I use in the creation of the image? b: how do I go about implementing use of the image? Also, I'd settle for being able to use 3 separate images for header, body, and footer as long as they used up all the screen real estate and not just that weird center area that gets inhabited when I use a banner in place of the blog title. I hope I'm explaining this correctly. Thank you for reading. mrmikeman on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-23710 Sat, 05 Nov 2011 06:30:18 +0000 mrmikeman 23710@http://themeshaper.com/forums/ using the above code and css, my social buttons have a tiny portion of it that is clickable.. can anyone provide a more efficiant way to putting social icons in the nav menu> simonafilote on "Adding images next to postfooter elements" http://themeshaper.com/forums/topic/adding-images-next-to-postfooter-elements#post-23664 Tue, 01 Nov 2011 17:40:28 +0000 simonafilote 23664@http://themeshaper.com/forums/ Hey, you were right, I removed the dots and it worked! Thanks for helping me out :) helgatheviking on "Adding images next to postfooter elements" http://themeshaper.com/forums/topic/adding-images-next-to-postfooter-elements#post-23661 Tue, 01 Nov 2011 14:54:27 +0000 helgatheviking 23661@http://themeshaper.com/forums/ simona, your code looks good, but make sure that the path to the file name is correct. if you've added this code to your theme's style.css and your images are in a folder called 'images' (in the root of your theme) then your path should actually be: <pre><code>background: url("images/pencil1.png") no-repeat scroll 0 2px #FFFFFF;</code></pre> the ../ means go UP one level from where you are (style.css) so no doubt it isn't finding the image folder. you can see that in firebug too usually as you'll get 404/not found errors. simonafilote on "Adding images next to postfooter elements" http://themeshaper.com/forums/topic/adding-images-next-to-postfooter-elements#post-23660 Tue, 01 Nov 2011 14:07:26 +0000 simonafilote 23660@http://themeshaper.com/forums/ Hi Helga Many thanks for your answer. In fact I had taken a look at the example site's CSS through Firebug, and what I found is the following: To add an image besides the tag links, I guess this is the code. I added it in my style.css and that created some space right before the tag-links in the postfooter where the small image should come, but the image itself doesn't appear...what am I missing? I double checked the image name to make sure it's right. #content .entry-utility .tag-links { background: url("../images/pencil6.png") no-repeat scroll 4px 1px #FFFFFF; padding: 0 8px 0 32px; } --------- To add the image before the comment count, I copy/pasted this code in the style.css but there is no effect at the frontend...not even some space as in the first case. #content .entry-utility .comment-link { background: url("../images/pencil1.png") no-repeat scroll 0 2px #FFFFFF; padding: 0 11px 0 18px; } What do you think? Simona helgatheviking on "Adding images next to postfooter elements" http://themeshaper.com/forums/topic/adding-images-next-to-postfooter-elements#post-23657 Mon, 31 Oct 2011 15:28:12 +0000 helgatheviking 23657@http://themeshaper.com/forums/ why don't you take <a href="http://getfirebug.com" rel="nofollow">http://getfirebug.com</a> or chrome's developer tools and examine what that site is doing? and then copy it? it is only a little CSS background image in conjunction with some left padding. simonafilote on "Adding images next to postfooter elements" http://themeshaper.com/forums/topic/adding-images-next-to-postfooter-elements#post-23656 Mon, 31 Oct 2011 12:11:31 +0000 simonafilote 23656@http://themeshaper.com/forums/ I've just started with WP and I'm a complete dummy with CSS and PHP but yet I'm keen to customise and style the blog theme as I wish... I've been searching for days for some solution to add a small speech bubble next to the comments count displayed in the postfooter of each post. Also, I'd like to add a graphic next to the other two elements displayed in the postfooter (post category and tags), something like it's being displayed on this blog: <a href="http://www.blago.net/baking/." rel="nofollow">http://www.blago.net/baking/.</a> My blog is crumbsofjoy.co.cc I would really appreciate your help with this. Simona helgatheviking on "Thematic Images for Nav Links & Seperators?" http://themeshaper.com/forums/topic/thematic-images-for-nav-links-038-seperators#post-23517 Wed, 19 Oct 2011 02:50:33 +0000 helgatheviking 23517@http://themeshaper.com/forums/ i'd try starting w/ my mega menu thread <a href="http://themeshaper.com/forums/topic/thematic-menus-demystified-1" rel="nofollow">http://themeshaper.com/forums/topic/thematic-menus-demystified-1</a> somewhere in there it is covered how to create a totally custom image menu. also mentioned, is modifying the Nav Walker, which is probably what you'd need to do in order to add markup that you could add image separators to daydreamer2k on "Thematic Images for Nav Links & Seperators?" http://themeshaper.com/forums/topic/thematic-images-for-nav-links-038-seperators#post-23515 Tue, 18 Oct 2011 16:53:12 +0000 daydreamer2k 23515@http://themeshaper.com/forums/ Hello, Having a little bit of a hair pulling out moment, I'm using thematic, I've customised the child theme exactly as I want except for one thing, I want to use images for the links in the navigation menu, and I also want to incorporate some seperators between the links which are also images. I have been searching & searching & cannot seem to work this out? Any help would be much appriciated! scott28 on "How do you transition a thumbnail excerpt img into a s/p full size img" http://themeshaper.com/forums/topic/how-do-you-transition-the-themat-excerpt-size-to-the-post-image-size#post-22775 Sat, 20 Aug 2011 13:36:09 +0000 scott28 22775@http://themeshaper.com/forums/ Hello, I'm totally new to the thematic and am a little lost here. I understand all the basics of the child theme but I was wondering if it's possible to have a small thumbnail image on my homepage (my home is configured to show excerpts) and then have it set up to where when you click on the thumbnail image, it takes you to the single post page with a full size image. Thanks in advance for any help at all! allenjcochran on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22754 Fri, 19 Aug 2011 10:16:34 +0000 allenjcochran 22754@http://themeshaper.com/forums/ Oh my site is: <a href="http://www.allenjcochran.com" rel="nofollow">www.allenjcochran.com</a> allenjcochran on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22753 Fri, 19 Aug 2011 10:16:12 +0000 allenjcochran 22753@http://themeshaper.com/forums/ This tutorial was ultimately really helpful. I positioned my social media icons exactly how I wanted them using this function: function my_div_socmedia(){ echo '<div id="socmedia"><div class="icons_social"> <a href="http://www.facebook.com/allenjcochran/"><img src="http://allenjcochran.com/wp-content/uploads/2011/08/facebook-logo.png" /></a> <a href="http://www.twitter.com/allenjcochran/"><img src="http://allenjcochran.com/wp-content/uploads/2011/08/twitter.png" /></a> <a href="http://www.linkedin.com/allenjcochran/"><img src="http://allenjcochran.com/wp-content/uploads/2011/08/linkedin-logo.png" /></a> <a href="mailto:allenjcochran@gmail.com"><img src="http://allenjcochran.com/wp-content/uploads/2011/08/mail.png" /></a> </div> </div>'; } add_action('thematic_header','my_div_socmedia'); AND, this CSS: #socmedia { margin: 0 auto; width: 940px; margin-top: -35px; z-index: 100; } .icons_social { /*padding-left: 30%;*/ text-align: right; } .icons_social img { width: 20px; height: 20px; padding: 5px; } BUT, i cannot get my links to work Any chance someone could tell me how to fix that? Is it all because of the z-index of #access? daveread on "Different backgrounds on post" http://themeshaper.com/forums/topic/different-backgrounds-on-post/page/2#post-22642 Thu, 11 Aug 2011 20:25:28 +0000 daveread 22642@http://themeshaper.com/forums/ Thanks - will do (in a few hours)... helgatheviking on "Different backgrounds on post" http://themeshaper.com/forums/topic/different-backgrounds-on-post/page/2#post-22641 Thu, 11 Aug 2011 20:22:03 +0000 helgatheviking 22641@http://themeshaper.com/forums/ sounds like you are asking for something different. try starting a new thread. include what you want to do differently, what you've tried and the results you get versus the results you would like. daveread on "Different backgrounds on post" http://themeshaper.com/forums/topic/different-backgrounds-on-post/page/2#post-22640 Thu, 11 Aug 2011 20:02:46 +0000 daveread 22640@http://themeshaper.com/forums/ Instead of setting body background via css, and using body classes to show various backgrounds, it could be done via childtheme function? If so, could you show an example of such a function? Thank you helgatheviking. helgatheviking on "Different backgrounds on post" http://themeshaper.com/forums/topic/different-backgrounds-on-post/page/2#post-22639 Thu, 11 Aug 2011 19:50:52 +0000 helgatheviking 22639@http://themeshaper.com/forums/ where the function has an image you'd wrap it in a link daveread on "Different backgrounds on post" http://themeshaper.com/forums/topic/different-backgrounds-on-post/page/2#post-22635 Thu, 11 Aug 2011 17:39:56 +0000 daveread 22635@http://themeshaper.com/forums/ Would there be a function for making the background image clickable? helgatheviking on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22523 Wed, 03 Aug 2011 03:04:13 +0000 helgatheviking 22523@http://themeshaper.com/forums/ i don't think you can limit the width of access.... b/c then you won't get the menu centered the way you expect. best to put the social icons inside #access sowingseeds on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22521 Wed, 03 Aug 2011 02:33:07 +0000 sowingseeds 22521@http://themeshaper.com/forums/ Addendum: cleanest way is the replacing of the search bar in access through the link given by helgatheviking. Take Gene's code - 3rd post down. You can remove the initial <?php section through to the ?>; start at <div id="access">; then replace from <div id="access-search"> with your code, leaving the final </div> <?php } Also you will now need to remove any negative top margin in your css on .icons-social. On your code it does not now need to be echoed... make sure no space (line break?) between the image and add a margin right to the first image. sowingseeds on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22519 Wed, 03 Aug 2011 02:05:28 +0000 sowingseeds 22519@http://themeshaper.com/forums/ Just a couple of comments. The link to topic on the search bar would be the way to go. Currently there is a link underline in between your two icons. There is a space between the coding for your two icons in functions. Put space between the two icons with: style="margin-right:10px;" after twitter.png. If you stay with what you have you could (I think) limit the width of #access to say 650px (if you have a width on #wrapper of 960px and center it with margin: 0 auto). That way you will not run up against the z-index issue that is covering the top part of your icons from being active as a links. helgatheviking on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22513 Tue, 02 Aug 2011 19:42:07 +0000 helgatheviking 22513@http://themeshaper.com/forums/ it's a combo of positioning and the fact that #access has a high z-index. the more i think about it the more i think you might be better served by adding your links into the access function see this link: <a href="http://themeshaper.com/forums/topic/add-search-bar-to-thematic-using-override" rel="nofollow">http://themeshaper.com/forums/topic/add-search-bar-to-thematic-using-override</a> instead of the search form you'd just use the markup from your my_div_socmedia function cookieandkate on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22512 Tue, 02 Aug 2011 18:45:35 +0000 cookieandkate 22512@http://themeshaper.com/forums/ Hooray! It works! You're right, helgatheviking, the code you mentioned first is unnecessary. I didn't have to edit sowingseeds' code to move the icons above the header, though. All I did was change the image source code and add links. I also fiddled with the CSS until the icons showed up in the right spot. Here's the code I'm using, in case it's helpful to anyone: // Remove the standard Thematic menu function remove_menu() { remove_action('thematic_header','thematic_access',9); } add_action('init', 'remove_menu'); // Moving the thematic menu above the header add_action('thematic_aboveheader','thematic_access'); // add icons icons to menu above header function my_div_socmedia(){ echo '<div id="socmedia"><div class="icons_social"><a href="http://twitter.com/#!/cookieandkate"><img width="18" height="18" alt="Follow me on twitter" src="http://cookieandkate.com/images/2011/08/twitter.png" /></a><a rel="alternate" href="http://feeds.feedburner.com/CookieAndKate"> <img width="18" height="18" style="margin-left:2px;" alt="Subscribe via RSS" src="http://cookieandkate.com/images/2010/10/rss-small2.jpg"> </a></div></div>'; } add_action('thematic_aboveheader','my_div_socmedia'); ONE little issue remains, though. When I hover my mouse over either of the icons, I don't see that I can click on the icon until my mouse is at the bottom edge of the icon. The icons are small, yes, but I should be able to click on them when I'm hovering directly over them. Any suggestions? Thanks again! helgatheviking on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22511 Tue, 02 Aug 2011 17:53:37 +0000 helgatheviking 22511@http://themeshaper.com/forums/ i don't think this: <pre><code>function child_access_menu() { $menu_sys = 'wp_nav_menu'; return $menu_sys; } add_filter('thematic_menu_type', 'child_access_menu');</code></pre> is necessary any more. thematic 0.9.8 uses wp_nav_menu by default and then falls back to w page-based menu the only change you need to make to sowingseed's code is to change the location. (presuming it does what you want) sowingseed's code hooks into thematic_aboveheader and the code you've posted moves the menu to below the header add_action('thematic_belowheader','my_div_socmedia',10); i just added a priority number so that it comes after your thematic_access() in the html markup. did you at least try sowingseed's code? you would have seen that it places the images in a different place. i'd adjust the code such that you auto-generate your file's location. put the icons inside a folder called "images" in your child theme's directory <pre><code>function my_div_socmedia(){ echo '<div id="socmedia"><div class="icons_social"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img1.gif" /><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img2.gif" /></div></div>'; } add_action('thematic_belowheader','my_div_socmedia');</code></pre> cookieandkate on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22510 Tue, 02 Aug 2011 16:36:19 +0000 cookieandkate 22510@http://themeshaper.com/forums/ I'm sorry to be a bother. I just looked at my functions.php and remember that I swapped the thematic menu for the wordpress menu. I'm guessing I need to edit the code provided by sowingseeds, right? Any suggestions? Here's what I have in my functions.php for the menu: // change Thematic #access menu for a Wordpress 3.0 menu function child_access_menu() { $menu_sys = 'wp_nav_menu'; return $menu_sys; } add_filter('thematic_menu_type', 'child_access_menu'); // Remove the standard Thematic menu function remove_menu() { remove_action('thematic_header','thematic_access',9); } add_action('init', 'remove_menu'); // Moving the thematic menu above the header add_action('thematic_aboveheader','thematic_access'); ScottNix on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22509 Tue, 02 Aug 2011 16:08:42 +0000 ScottNix 22509@http://themeshaper.com/forums/ The php would go in the functions.php file of your child theme. cookieandkate on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22506 Tue, 02 Aug 2011 12:29:13 +0000 cookieandkate 22506@http://themeshaper.com/forums/ Thank you so much for your response! I'm sorry to be dense, but where would I insert the php code? In header.php, functions.php or elsewhere? I'm afraid to put it in the wrong spot. Thank you! sowingseeds on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22503 Tue, 02 Aug 2011 08:05:58 +0000 sowingseeds 22503@http://themeshaper.com/forums/ Maybe something simple will get you what you want. How about adding a new division into thematic_aboveheader (I assume your menu is already in that hook)? Maybe then if you put the social media icons inside a class division styling would be not too difficult. So for example: function my_div_socmedia(){ echo '<div id="socmedia"><div class="icons_social"><img src="path_to_icon1" /><img src="http://path_to_icon2" /></div></div>'; } add_action('thematic_aboveheader','my_div_socmedia'); Then in css: #socmedia { margin-left:50%; width: 480px; margin-top:-25px; } /*adjust margin-top to move icons up*/ .icons_social { margin-left:200px; } /*adjust margin-left to move icons as far right as you wish*/ Don't think you will need any 'clear:left' or equivalent. cookieandkate on "adding icons to menu" http://themeshaper.com/forums/topic/adding-icons-to-menu#post-22501 Tue, 02 Aug 2011 05:00:08 +0000 cookieandkate 22501@http://themeshaper.com/forums/ Hi, I have read through the Thematic menus demystified post and read about Wordpress menu styling, but I'm still stumped. All I want to do is add a small twitter and a small RSS icon in the top navigation menu on my blog, <a href="http://cookieandkate.com." rel="nofollow">http://cookieandkate.com.</a> I already have text links listed in the top nav—they are left aligned, though, and I want the icons to appear separately, but in the same row, on the right. I've tried adding a custom CSS style to the links, and applying an image through the stylesheet, but it won't work. I must be doing something wrong. I would so appreciate your help! Sincerely, Kate jhkoning on "Get-The-Image for Category & Tag Archives" http://themeshaper.com/forums/topic/get-the-image-for-category-038-tag-archives#post-22260 Sun, 10 Jul 2011 08:20:58 +0000 jhkoning 22260@http://themeshaper.com/forums/ Thanks @ridgely - this helped me out too - much appreciated, Jas