ThemeShaper Forums » Thematic


Newb Q: Apply ID or Class to Image

(6 posts)
  • Started 10 years ago by ravenousravendesign
  • Latest reply from ravenousravendesign
  • This topic is resolved
  1. I am experienced in HTML and CSS. I understand PHP somewhat and am currently teaching myself to use wordpress and design my own themes using the thematic child template. I am also still learning about plugins, theme filters, and hooks.

    I figured out how to edit the CSS for most of the page structure id and classes. I am trying to recreate my current website and would like to apply images that are part of the global css. I have tried inputting the standard img tag into a page and nothing shows up.

    Example: The pretty leaves you see in the corners. I want to implement them in my child theme. They are on every page. What and Where is the most functional way to implement my global style images? Then, how do I apply a class or id to it so I can reference my positioning of it in my style.css?

    I am using Wordpress 3.1 on a local host with WAMP. I plan to export my new wordpress site at a later date through my hosting provider.

    P.S. I am very sorry if this newb question is giving you a headache. But I tried googling it and have been unsuccessful in finding it myself :(

    Posted 10 years ago #
  2. Alright, I am a little confused but either way I will take a stab at it.

    Do you have the original PSD art files? If so it would be super easy to actually include those leaves in the header image with part of the sides from the background making 1 bigger image that contains everything.

    If that doesn't work, instead of adding the actual images, you could do it through span tags. If you were to do it like

    <span class="left-leaf"></span>

    and pull the image through the CSS,

    span.left-leaf { background: url(image/path.jpg); height: 100px; width: 100px; position: absolute; top:0; left:-20px; }

    That is just the basic idea to do it a few different ways. Although I would need to know how you have chopped up your template to provide you with more useful info. At worst you may have to add an extra div through the functions php. ;)

    Posted 10 years ago #
  3. badass. your span idea worked Mr.Nix. yay! I think my problem was I wasn't calling width and height. I will try not to be so confusing in the future ;p

    I applied the <span> onto one of my pages. But,Is there a more efficient way to call in images that I can use globally so I don't have to add span tags onto every page i make in the future?

    Also, I'm going to be wanting to put images in place of nav menu text, how do I access the html that way?

    I guess what I am trying to say is ideally, I would like to apply my span right into the #main div that is part of the Thematic Page Structure. I don't know where I can access this html/php file. My child theme doesnt show me this file in the editor.

    P.S. My current site is very unorganized and not semantic at all. I am learning to be more efficient with code and hoping wordpress will help a little with that. My new site will look very similar, but will be, well, JUST MORE AWESOME. HAHA.

    Thanks So Much for your Help ^_^

    Posted 10 years ago #
  4. You will probably want to pull them in through the functions.php to make it easy.

    function quick_div() {
    <div class="leaves">
    <span class="tl-leaf></span>
    <span class="tr-leaf></span>
    <span class="bl-leaf></span>
    <span class="br-leaf></span>

    The problem is the position:absolute css will position to the parent that is set to position:relative, so this may not be drop in and ready to go, depends on the parent (the html block that contains the span).

    Posted 10 years ago #
  5. You are a genius. I did not know functions could be that powerful. Thank you for sharing with me your knowledge and experience. I will be using php functions as much as I can. Thank you so much Mr.Nix. I works!! I'm so excited ^_^

    Posted 10 years ago #
  6. I found this very useful in learning how to access areas of interest in my child themes. I should have found this earlier!

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.