Styling links & h1/h2 links respectively

  • Resolved wrightj999

    (@wrightj999)


    12 years, 7 months ago

    Hello,

    I am having a difficulty customizing my the appearance of my links. On my blog excerpt page, the heading of blog entries are links (h2 I believe from reading the page code source) and the “read more” link (as well as the links within the posts) are your typical a:link classification.

    By default, the secondary posts excerpts (under the main, most recent post excerpt) have an underline on hover text/link decoration style. However the main post excerpt heading/link, does not. So these two heading/link styles are obviously not connected in the css.

    Can someone advise me as to how to customize my css in order to modify these different heading styles to my liking? I would like all regular links in the post body to be a different color than the current “000”(so they stand out as clickable, rather than blending in), however when I change that markup in the a:link style, it changes the color of all links (including the heading style links.) So I need to separate these things out. Working in dreamweaver I am used to creating custom rules through that programs interface, so I’m used to creating a rule starting with #(ID) in order to get this type of customization, but I’m kinda lost here in wordpress. help!!

    oh yeah, here is a link to my page for a visual in case that helps:
    http://www.wholeaf.com/wholeaf-blog/

Viewing 8 replies - 1 through 8 (of 8 total)
  • esmi

    (@esmi)

    12 years, 7 months ago

    Try using Firefox with the Firebug add-on for this kind of work.

    Thread Starter wrightj999

    (@wrightj999)

    12 years, 7 months ago

    ooooh, thanks for the suggestion, firebug seems like a powerful little add-on.

    esmi

    (@esmi)

    12 years, 7 months ago

    Give it a few days and you’ll start to wonder how you managed without it. 🙂

    Thread Starter wrightj999

    (@wrightj999)

    12 years, 7 months ago

    Awesome I hope so!!..

    So I have installed firebug, and I have it open. I’ve seen kinda how it works, putting a little window on the bottom and that you can switch between views of the html or the css of the page. but how would you suggest.. or what kind of tip could you offer me to get me going in the right direction to figure out how I am going to apply firebug for my purpose here? Or is there thorough documentation that I should just go ahead and read to figure this out? … and also, it will be okay to make changes to the code through this device? It will have the proper authorization to make changes? (this thing doesn’t let you change other peoples websites code does it? that would be crazy, I’m thinking not, but just had to ask)

    Thread Starter wrightj999

    (@wrightj999)

    12 years, 7 months ago

    okay, so maybe i can jump in here with what I think would be the way to go about this, now that I’ve done some further investigating, and maybe you can let me know if I’m on the right track.

    I found an option within the program called inspect element. I then was able to grab the div with the suspect H2 link I am trying to modify. I was able to see what the div id and class were labeled. So I could take the ID name and write a custom rule in my themes css like #divid h2, a:link {
    css property;
    }

    Am i getting warm here at all? to play things safe I’m assuming it’d be best to add this change through the wordpress dash as usual.

    esmi

    (@esmi)

    12 years, 7 months ago

    You’re more than getting warm. You’re spot on! I’m not sure how the Vina theme works and it it has any custom CSS options but, if not, just modify the main stylesheet as usual. Just be aware that, if you update the theme, you’ll lose your customisations.

    Thread Starter wrightj999

    (@wrightj999)

    12 years, 7 months ago

    cool man. I was checking it out earlier and tested a couple writing a couple rules, but to no avail yet. But I’m sure I’ll figure it out with another sit down, and investigation. I’ll update how things go one way or the other. Thank you!

    Thread Starter wrightj999

    (@wrightj999)

    12 years, 6 months ago

    Hey I got it to work, took me a minute to realize it, but I was able to write the code easily by just selecting the element and looking at the tag path. firebug is an invaluable tool, thanks for sharing!! And for the help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Styling links & h1/h2 links respectively’ is closed to new replies.

Tags