BrianAdamantite
"W3Schools":http://www.w3schools.com/
"Try It":http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float
I have looked here to no avail.
"Rise of Asmodeus":https://greyhawk-636-cy-the-rise-of-asmodeus.obsidianportal.com/wikis/rise-of-asmodeus-reforged-css
I have tried code from this site as well, but I feel some other element(s) currently in play is affecting this.
"Gray Wallpaper":https://db4sgowjqfwig.cloudfront.net/assets/255554/grey-nav1.jpg
I just want to change the nave bar from Vertical to Horizontal with the gray background above.
I need this to be done in CSS as opposed to hard coded in the HTML. This will make future changes a breeze, lol!!!
This is my site: "REGNUM":https://regnum.obsidianportal.com
Thank you kind soul that helps take pity on the frustrated.
AZ_Rune
Comments
@/*Horizontal Navigation Bar*/
/*Extra space for Links*/
.nav-links li a {margin: 0 8px 0 0;}
/*Change Dimensions and Position of Nav Bar*/
#campaign-nav {width:100%;
position:relative;
}
/*Remove Background Color from Nav Bar*/
.campaign-public-layout #campaign-nav {
background-color:transparent;
}
/*Move Nav Bar Up*/
.collapsable-nav-row .front-nav-container {
width:100%;
top:-30px;
background-repeat:no-repeat;}
/*Float Nav Bar to Make it Horizontal*/
#campaign-nav ul li {display:inline;float:left;}
/*Remove Triangle after Active Page Link*/
.campaign-public-layout #campaign-nav li.active:after {
content: none;}@
My quandary is that I have already edited over 600 pages with a traditional html nav bar.... don't think I am going back, but next time they make a major update I will.
Just trying to help out.
You'd have to be an Indiana Jones fan to get the reference. Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
" !!! " Just in case the other ones above were not clear how much I appreciate your help.
/Change Link Names/
/remove current text/
#campaign-nav .adventure-log .nav-text {font-size:0;}
#campaign-nav .wiki .nav-text {font-size:0;}
#campaign-nav .characters .nav-text {font-size:0;}
/add new text/
#campaign-nav .adventure-log a:after {content:“Adventure Tales”;}
#campaign-nav .wiki a:after {content:“Watch Reports”;}
#campaign-nav .characters a:after {content:“Heroes & Villains”;}
I tested this and it did not change the text, so I am wondering if I just remove it all and then use this code to use images?
/NAVIGATION BAR/
/Change Height of Links/
.campaign-public-layout #campaign-nav li a {
height:68px;
}
/Remove Link Text and Add Image/
#campaign-nav .dashboard a {
font-size: 0;
width: 132px;
height: 68px;
background-image: url(http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .front-page a {
font-size: 0;
width: 81px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .forum a {
font-size: 0;
width: 80px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .calendar a {
font-size: 0;
width: 114px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .adventure-log a {
font-size: 0;
width: 125px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .wiki a {
font-size: 0;
width: 59px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .characters a {
display: block;
font-size: 0;
width: 137px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .items a {
display: block;
font-size: 0;
width: 74px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .maps a {
display: block;
font-size: 0;
width: 76px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
#campaign-nav .settings a {
display: block;
font-size: 0;
width: 102px;
height: 68px;
background-image: url(http://http://Your.URL/Image.jpg);
background-repeat:no-repeat;
}
/Change Nav Bar Dimensions/
#campaign-nav {
height:90px;
position:relative;
}
/Remove Background Color from Nav Bar/
.campaign-public-layout #campaign-nav {
background-color:transparent;
}
/Add Background To Nav Bar/
.collapsable-nav-row {
position:relative;
top:-20px;
}
.collapsable-nav-row .front-nav-container {
width:100%;
background-image:url(http://db4sgowjqfwig.cloudfront.net/assets/254249/navbarbottom.png);
background-repeat:no-repeat;
top:-10px;
left:15px;}
Thanks,
Brian
P.S. I somehow screwed up my right side bar and the large the screen it is fixed in the center somehow?
@/*Horizontal Navigation Bar*/
/*Extra space for Links*/
.nav-links li a {margin: 0 8px 0 0;}
/*Change Dimensions and Position of Nav Bar*/
#campaign-nav {width:100%;
position:relative;
}
/*Remove Background Color from Nav Bar*/
.campaign-public-layout #campaign-nav {
background-color:transparent;
}
/*Move Nav Bar Up*/
.collapsable-nav-row .front-nav-container {
width:100%;
top:-30px;
background-repeat:no-repeat;}
/*Float Nav Bar to Make it Horizontal*/
#campaign-nav ul li {display:inline;float:left;}
/*Remove Triangle after Active Page Link*/
.campaign-public-layout #campaign-nav li.active:after {
content: none;}
/*CHANGE LINK NAMES*/
/*Horizontal Navigation Bar*/
/*Extra space for Links*/
.nav-links li a {margin: 0 8px 0 0;}
/*Change Dimensions and Position of Nav Bar*/
#campaign-nav {width:100%;
position:relative;
}
/*Remove Background Color from Nav Bar*/
.campaign-public-layout #campaign-nav {
background-color:transparent;
}
/*Move Nav Bar Up*/
.collapsable-nav-row .front-nav-container {
width:100%;
top:-30px;
background-repeat:no-repeat;}
/*Float Nav Bar to Make it Horizontal*/
#campaign-nav ul li {display:inline;float:left;}
/*Remove Triangle after Active Page Link*/
.campaign-public-layout #campaign-nav li.active:after {
content: none;}
/*Change Link Names*/
/*remove current text*/
#campaign-nav .adventure-log .nav-text {font-size:0;}
#campaign-nav .wiki .nav-text {font-size:0;}
#campaign-nav .characters .nav-text {font-size:0;}
/*add new text*/
#campaign-nav .adventure-log a:after {content:"Adventure Tales";}
#campaign-nav .wiki a:after {content:"Watch Reports";}
#campaign-nav .characters a:after {content:"Heroes & Villains";}@
In the future, when you copy stuff from the forum, make sure you use CTRL+SHIFT+V in Firefox or Chrome to paste without the formatting. Or right click and choose "Paste as plain text" in chrome. The code I pasted above that's in the yellow border should be safe to copy and paste as normal, though.
Your sidebar looks like you used the code that someone else posted (Was it Langy? I'll have to look it up) elsewhere. Your sidebar isn't gone, but it's hidden until you mouseover the right spot.
I have used the code you provided above and I think once I can square away what a good space setting will be for me I'll like it better than the side nav.
The real question is can you add slots to this or are you stuck with 10?
Thanks,
Leonidas300
I know I've done my fair share of acquiring code from Madartiste, KillerVP, PhoenixMark, and especially Wolfhound
Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
"2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
"Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/
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
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!
AZ_RUNE