Kryptronic Software Support Forum
You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.
#1 05-12-2015 11:46:18
Skin Top
Hello,
I would like to change the top menu width to that of the main body width of the website. I'm not sure which element to change to make it happen the way I would like. The nav menu is the width I would like to top menu to be. Which element do I change to bring that about? Firefox says it's the skin top wrapper element. What I would like is for the orange top menu to be the same width as the site.
http://store.kchostingetcetera.org/
Last edited by mdowning (05-12-2015 11:52:30)
Offline
#3 05-13-2015 08:52:29
Re: Skin Top
west4 wrote:
in your all.css change the #skin_top width: 100% to width: 978px;
that should do it.
Cheers,
Bruce
Okay, just tried that Bruce. What it did was offset the top menu way to the left. You can see it at the link.
http://store.kchostingetcetera.org/
Offline
#4 05-15-2015 03:09:36
Re: Skin Top
#skin_top_wrapper ..contains the text..
#skin_top ..controls the orange bar..
#skin_header ..is your white bit with KC hosting in...
Block elements can be center-aligned by setting the left and right margins to "auto". so..
Code:
#skin_top
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
background-color: #000000;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
box-shadow: #555555;
z-index: 10;
}becomes
Code:
#skin_top
{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 978px;
background-color: #000000;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
box-shadow: #555555;
z-index: 10;
}and
Code:
#skin_top_wrapper
{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: block;
width: 1000px;
clear: both;
}becomes
Code:
#skin_top_wrapper
{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: block;
width: 978px;
clear: both;
}and if you wanted you could add
Code:
#skin_header
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
width: 100%;
background-color: #ffffff;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
box-shadow: #999999;
clear: both;
}becomes
Code:
#skin_header
{
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
width: 978px;
background-color: #ffffff;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
box-shadow: #999999;
clear: both;
}I think that should do it..
Oh.. also, this doesn't work if the width is 100%
Cheers,
Bruce.
Last edited by west4 (05-15-2015 03:12:22)
I'd rather have a full bottle in front of me, than a full frontal labotomy.
Offline
#5 05-15-2015 08:47:46
Re: Skin Top
Thanks Bruce, that works although the top menu needs to be rounded to look like the nav bar
west4 wrote:
#skin_top_wrapper ..contains the text..
#skin_top ..controls the orange bar..
#skin_header ..is your white bit with KC hosting in...
Block elements can be center-aligned by setting the left and right margins to "auto". so..Code:
#skin_top { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; background-color: #000000; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; box-shadow: #555555; z-index: 10; }becomes
Code:
#skin_top { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 978px; background-color: #000000; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; box-shadow: #555555; z-index: 10; }and
Code:
#skin_top_wrapper { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; width: 1000px; clear: both; }becomes
Code:
#skin_top_wrapper { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; width: 978px; clear: both; }and if you wanted you could add
Code:
#skin_header { margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; width: 100%; background-color: #ffffff; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; box-shadow: #999999; clear: both; }becomes
Code:
#skin_header { margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; width: 978px; background-color: #ffffff; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; box-shadow: #999999; clear: both; }I think that should do it..
Oh.. also, this doesn't work if the width is 100%
Cheers,
Bruce.
Offline
#6 05-15-2015 08:56:31
Offline
#7 05-15-2015 09:07:07
Re: Skin Top
ok great, i also set the skin top to 1000px so it was even with the nav bar width.
nigel wrote:
border-radius: 4px 4px 4px 4px;
Offline
#8 05-15-2015 11:24:44
Re: Skin Top
Nigel,
I need to create top 10px space to match this link
http://wordpress.kchostingetcetera.org/
nigel wrote:
border-radius: 4px 4px 4px 4px;
Offline
#10 05-18-2015 08:17:07
Re: Skin Top
I tried that Nick, in another post Robash gave me this fix. All.css find > #skin_background add padding-top: 10px;
It worked.
https://forum.kryptronic.com/viewtopic.php?id=32565
webmaster wrote:
margin-top: 10px; would give you the top margin you need.
Last edited by mdowning (05-18-2015 08:18:42)
Offline