Yeah, that's mostly my code. When you say "right side nav bar" you mean the sidebar that runs down the right side of the page, right? Are you trying to put a tile-able image down the whole sidebar? The code you've got there is for a 3-piece image (top, bottom, and tiling middle) to go under individual pieces of that sidebar (such as the part that has the players/characters, the last-updated section, etc.).
If you want to do an image or color down the entire right sidebar, try:
@#sidebar {background-color: red !important;}@
or
@#sidebar {background-image: url(http://Your.Image.Url/image.jpg);
background-position:center top
background-repeat:repeat-y;}@
For the image, you'll need to change the repeat depending on how big it is and how you want it to tile. If something isn't working, sometimes you need to add !important to it (as I did with the background-color as a demonstration).
Yes, the right side bar that includes the characters, the fan button, and the stream.
I am attempting the same thing that is done in the Rise of Asmodeus campaign where each piece is covering background because the blue I picked doesn't show very well on the current background so some things are hard to read. Let me give what you just gave me a try and I will post my findings!
You wouldn’t happen to know the color/code for the grey color that the bar at the very top of the campaigns are would you? It’s the bar that has my profile/ascendant membership, campaigns, new, and search.
The majority of the bar is colored #423E3E, but the welcome message and thumbtack are #38302B. (I'm assuming that's what you meant by color/code -- if you want CSS to change it, let me know and I can dig mine up.)
Thanks Savannah! (It feels weird typing that because it's my daughter's name lol) That actually is to my liking. I'll play around with it some more.
Just to get this straight and make sure I am understanding the code since I've never seen CSS before.
#sidebar {background-image: url(http://Your.Image.Url/image.jpg);
background-position:center top
background-repeat:repeat-y;}
There are elements to a page that are labeled? So in this instance #sidebar is the label of the right sidebar. You can call it out and then modify it with simple code? I'm sure it gets more complicated than this of course.
Yoshara, you've got it. the # sign denotes an "ID" which is a unique identifier for an item on the page. Whenever you see something with a period in front of it (such as .sidebar-last-updated), that's called a "class." Classes are meant to be reused for multiple items on a page. For the purposes of the custom CSS in Obsidian Portal, I think we can only create classes, and not IDs. But you can make classes to style all kinds of things. I have a class to add a drop capital to some paragraphs. In the body of my wiki page, it would look like Here's my paragraph. for instance.
I'm not a very good teacher, but these guys have some really great tutorials on CSS if you want to know more: "W3Schools":http://www.w3schools.com/css/
Another useful trick, if you are using Firefox or Chrome as your browser, is to right click on an item on a webpage and choose "Inspect Element" from the context menu. It can tell you a lot about the underlying code, but it can be a bit confusing until you've got a basic grasp of CSS.
I'm pretty much done with my campaign... even posted my mess of CSS on my landing page.
Lord, I am so terrible at organizing code, it's not even funny. Heh (I've clipped most of the
redundant or old stuff away but i'm sure some of it is still in there.)
Sadly, right now I think the hardest part (and it's not really hard honestly) is trying to find the
right content width so as not to annoy too many people who just don't have the screen space
to see stuff.
Sorceress,
GM of
"The Hero Academy":https://the-hero-academy.obsidianportal.com/
Life marches ever on, for both us and our adventurers. There will always be new things - even if they are only new WIKI pages - but in terms of the changeover from preforged site to REFORGED SITE, Mysteria is now on track, thanks to the Vanguard System and in particular Wolfhound - code behemoth, Savannah - awsome possum, and dawnhawk - Terrificodus Rex!
Viva la community!
twiggyleaf
CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Thanks Saethone. Theophagie looking very cool too. Once more I really miss being able to comment on other campaigns.
twiggyleaf
CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Really looks awesome Twiggy!! Killing me that I cannot comment on the adventure logs!
killervp
"A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Here to help anyone- Send me a PM
twiggyleaf
CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Shadows is back up (Finally) and restored (mostly) to its former glory
Still some minor tweaking/clean up needed over the entire site, but we're up and functional.
If some of you could look it over and let me know of anything I missed, I'd REALLY appreciate it.
Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
"Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/
I use our mini-campaign "Al-Qadim / Golden Voyages":https://aq-golden-voyages.obsidianportal.com/ to play with the CSS and the new OP (I don't think if "play" the word...), and I'm happy with the final result.
Although my old translate option don't work now, I hope you will still enjoy my work!
And again, thank you, Obsidian friends for your ideas, tutorials, help... etc.
-Pils
"Dark Sun / La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Al-Qadim / Golden Voyages":https://aq-golden-voyages.obsidianportal.com/: Who among you dares to challenge the high seas?
Remember the Reforge? Some was fixed, other items were not. While the current management deleted some of the best advice on coding in their efforts to pretend things were fine, here are some that worked through the issues with help from the community.
Comments
If you want to do an image or color down the entire right sidebar, try:
@#sidebar {background-color: red !important;}@
or
@#sidebar {background-image: url(http://Your.Image.Url/image.jpg);
background-position:center top
background-repeat:repeat-y;}@
For the image, you'll need to change the repeat depending on how big it is and how you want it to tile. If something isn't working, sometimes you need to add !important to it (as I did with the background-color as a demonstration).
I am attempting the same thing that is done in the Rise of Asmodeus campaign where each piece is covering background because the blue I picked doesn't show very well on the current background so some things are hard to read. Let me give what you just gave me a try and I will post my findings!
You wouldn’t happen to know the color/code for the grey color that the bar at the very top of the campaigns are would you? It’s the bar that has my profile/ascendant membership, campaigns, new, and search.
edit: nvm, I didn't realise hex worked. xD
Edit: Aaaand ninja'd by an edit.
#sidebar .sidebar-party-members, .sidebar-last-updated, #sidebar .sidebar-quick-stats, #sidebar fan-counter-container, #sidebar .stream-module-container, #sidebar .adventure-log-index-filter {background-color: red !important;}
Or for a single tiling background:
#sidebar .sidebar-party-members, .sidebar-last-updated, #sidebar .sidebar-quick-stats, #sidebar fan-counter-container, #sidebar .stream-module-container, #sidebar .adventure-log-index-filter {background-image: url(http://Your.Image.Url/image.jpg);
background-position:center top
background-repeat:repeat-y;}
Just to get this straight and make sure I am understanding the code since I've never seen CSS before.
#sidebar {background-image: url(http://Your.Image.Url/image.jpg);
background-position:center top
background-repeat:repeat-y;}
There are elements to a page that are labeled? So in this instance #sidebar is the label of the right sidebar. You can call it out and then modify it with simple code? I'm sure it gets more complicated than this of course.
If I can ever help with anything let me know.
I'm not a very good teacher, but these guys have some really great tutorials on CSS if you want to know more: "W3Schools":http://www.w3schools.com/css/
Another useful trick, if you are using Firefox or Chrome as your browser, is to right click on an item on a webpage and choose "Inspect Element" from the context menu. It can tell you a lot about the underlying code, but it can be a bit confusing until you've got a basic grasp of CSS.
"Ferdiad Cycle":http://www.obsidianportal.com/campaigns/52444
Unconquered Kingdoms, July 2016 CotM
Lord, I am so terrible at organizing code, it's not even funny. Heh (I've clipped most of the
redundant or old stuff away but i'm sure some of it is still in there.)
Sadly, right now I think the hardest part (and it's not really hard honestly) is trying to find the
right content width so as not to annoy too many people who just don't have the screen space
to see stuff.
Sorceress,
GM of
"The Hero Academy":https://the-hero-academy.obsidianportal.com/
Viva la community!
twiggyleaf
CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
"Theophagie":https://theophagie.obsidianportal.com/ - Houseruled D&D 3.5 in
Alternate History Earth
"Zeroed":https://zeroed.obsidianportal.com/ - GURPS Cyberpunk-Sci-Fantasy
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
twiggyleaf
CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
killervp
"A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Here to help anyone- Send me a PM
Just trying to help out.
Cheers,
-Arsheesh
twiggyleaf
CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
Still some minor tweaking/clean up needed over the entire site, but we're up and functional.
If some of you could look it over and let me know of anything I missed, I'd REALLY appreciate it.
Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
"Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/
Although my old translate option don't work now, I hope you will still enjoy my work!
And again, thank you, Obsidian friends for your ideas, tutorials, help... etc.
-Pils
"Dark Sun / La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Al-Qadim / Golden Voyages":https://aq-golden-voyages.obsidianportal.com/: Who among you dares to challenge the high seas?
-Pils
Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)
Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!
(And I'm so soooorry for my poor english...)
Just trying to help out.
twigs
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
-Pils
Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)
Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!
(And I'm so soooorry for my poor english...)
Remember the Reforge? Some was fixed, other items were not. While the current management deleted some of the best advice on coding in their efforts to pretend things were fine, here are some that worked through the issues with help from the community.
Just trying to help out.
Bravo on the thread necro
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
I knew they could not have deleted them all.
Just trying to help out.