single css changes

  • Unknown's avatar
    weirdscience · Member ·

    how does one implement a change that only affects a single page? can this be done within the blog post itself? currently on my ‘about’ page, i have 4 links that i put in when i made the page. they sit beside one another (i.e. horizontal line). i’d like to put in those little vertical lines (one to the right of each link) to give a nice, separated effect(like what you see at the very bottom of the regulus theme where it links to wordpress and the theme maker). i’m not sure that this is something to do in the actual css box, given that the links were done in the blog post (might be finnicky to line it all up, margin-wise). is there a way to code within the blog post to affect just one bit of text? thanks! any info would be very helpful b/c this is something i can apply to many things. :)

  • Unknown's avatar
    devblog · Member ·

    Those vertical lines are called ‘pipe characters’. The key on your keyboard where this character is right above the [Enter] key (the other character on that key is a back slash).

    Try this:

    <p align="center"><span style="font-size:15px;"> <a href="http://weirdscience.ca/weird-science/creator/">Creator</a>  |  <a href="http://weirdscience.ca/weird-science/writers/">Writers</a>  |  <a href="http://weirdscience.ca/weird-science/copyright/">Copyright</a>  |  <a href="http://weirdscience.ca/weird-science/privacy-policy/" title="Privacy Policy">Privacy Policy </a></span>

    Also, just a recommendation, don’t use px units for your font size, use pt or em instead (i.e. font-size: 14pt).

    HTH

  • Unknown's avatar
    weirdscience · Member ·

    thank you! that worked wonderfully..if i wanted to change the color of the lines, where would i put those commands in?

    also, i had been using px for changes but i will change to pt instead..thanks for the tip..i’m guessing it maybe has something to do with browsers or no?

  • Unknown's avatar
    devblog · Member ·

    No, px units are for images, margins, paddings, etc., whereas ems and pts are for fonts.

    Some people use ems for margins/paddings (i.e. margin: 1em;) but, personally, I find it a bad practice.

    Also, when you use px units for your font size, let’s say I find your text too small, and can’t read it, and I want to increase it, I won’t be able to do it because you’re setting its size to a pixel ‘fixed’ size.

    Now, to change the color of the pipe characters, add a ‘color’ property to your inline style: 

    <p align="center"><span style="font-size:15px; color:[colorYouWant];"> <a href="http://weirdscience.ca/weird-science/creator/">Creator</a>  |  <a href="http://weirdscience.ca/weird-science/writers/">Writers</a>  |  <a href="http://weirdscience.ca/weird-science/copyright/">Copyright</a>  |  <a href="http://weirdscience.ca/weird-science/privacy-policy/" title="Privacy Policy">Privacy Policy </a></span>
</p>

    HTH

  • Unknown's avatar
    weirdscience · Member ·

    thanks again…i thought i’d ask now because i’m sure in future I will need to alter the color.

    i’m so excited about the css because it makes such a difference..i just want to be sure i get it exactly how i want it (for now) before paying for the upgrade..hehe. :)

  • Unknown's avatar
    atthe404 · Member ·

    Don’t use pts. The dpi on Macs is different from Windows.

  • Unknown's avatar
    devblog · Member ·

    atthe404 is right, use ems instead.

  • The topic ‘single css changes’ is closed to new replies.