Changing Nav Bar Text Color

Donegal
Donegal
edited November 2013 in Campaign Portal Building
Hello,
Can someone tell me the code to change the text color of the left side nav bar?

I am also interested in putting a border texture/image about 40 pixels around the edges of all my pages.

Thanks,
Don

"Blackmire Marches":https://haven-hinterlands.obsidianportal.com/

Comments

  • madartiste
    madartiste
    Posts: 328
    Left side nav bar? Link colors should be: @.campaign-public-layout #campaign-nav a {
    color: white !important;
    }@

    I'm not sure if you need the !important for that, though.
  • SkidAce
    SkidAce
    Posts: 830
    Isn't it also the color you choose for "Main" under Settings; Style?
  • Donegal
    Donegal
    Posts: 19
    Great! Thanks, worked perfectly.
  • madartiste
    madartiste
    Posts: 328
    SkidAce, I think it's default to white. The background that appears on the active page is the "main" color -- I think.
  • madartiste
    madartiste
    Posts: 328
    For the border image, it occurs to me you could just make the border part of the background image and slice it into a top, bottom, and middle part. You can essentially stack background images, so it would give you the effect of a border.

    Example for how it would look to use multiple background images in a single element: @background-image: url(http://myimageurl.com/top.png),
    url(http://myimageurl.com/bottom.png),
    url(http://myimageurl.com/middle.jpg);
    background-position: center top, center bottom, center top;
    background-repeat: no-repeat, no-repeat, repeat-y;@
  • Donegal
    Donegal
    Posts: 19
    Thanks for the help! Is there any place where all of the CSS classes are compiled for Obsidian Portal? As I start to understand the language a little better it occurs to me what I really don't know is what everything's name is on the site.
  • Donegal
    Donegal
    Posts: 19 edited November 2013
    @madartiste: Interesting, so would I use GIMP or something to make an image with a border and then slice it or just use the code to incorporate both images. I guess what I am asking is in your code which is my parchment looking main background url and which is the leather border url?

    edit: Google is a dangerous thing! I found this site that gave me the exact code I needed. It even has a preview where you can load your own image to see how it will look: "Border Image Generator":http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D

    You can see the results here: "Blackmire Marches":https://haven-hinterlands.obsidianportal.com/
    Post edited by Donegal on
  • Langy
    Langy
    Posts: 364
    There's no place where every class OP uses is compiled except the sites themselves. I recommend using your browser's 'Inspect Element' feature to see what the code is for a page; this'll tell you what all the classes are and what they're doing. I think most browsers support just right-clicking on whatever it is you're interested in and selecting 'inspect element'.
  • madartiste
    madartiste
    Posts: 328
    @Donegal, nice find for the border image! Glad it worked out for you. :)
  • Savannah
    Savannah
    Posts: 188
    I like that look a lot, Donegal. Thanks for sharing that link, too!
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions