Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530054

<em>@sebbs 420651 wrote:</em><blockquote>
Is there anyway to get everything below the blue banner to come up a little? to remove some of the white space?</blockquote>

Try adding this to your custom.css file . . .


.t3-spotlight-1 .t3-module {
margin-bottom: 0;
margin-top: -30px;
}

Again, you can play around with the pixel value until you/your client is happy with the result.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530055

<em>@sebbs 420654 wrote:</em><blockquote>This is my entire custom.css
@charset “utf-8”;
/* CSS Document */

.col-xs-12.col-md-3.logo.col-sm-6 {
width: auto;
}
col-xs-12.col-md-6.t3-mainnav.navbar.navbar-default.hidden-sm {
width: auto;
float: right;
}
.t3-header {

height: 125px;
padding-bottom: 0;
padding-top: 15px;
position: relative;
}

.t3-mainnav {
border-left: 0 none;
border-radius: 0;
border-right: 0 none;
bottom: 145px;
float: right;
width: 1000px;
}

#toolbar {
height: 40px;
}</blockquote>

Add the following . . . .


#toolbar .toolbar-ct-3 {
border-left: none;

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530056

Wow! you are Amazing! The spacing is perfect! (I hope I’m not being a pain! )
Is is possible to get :
1. The logo to bump up a little?
2. for the menu items to have the same space below the word (i.e. Home, Publishing, etc..) as it does above the word (the hover color)
3. is there a way to get ride of that little line below the flags or do I need to make the black toolbar 5 px bigger to avoid that?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530057

<em>@sebbs 420657 wrote:</em><blockquote>
Is is possible to get :
1. The logo to bump up a little?</blockquote>

Try the following (again, adding to your custom.css file):


.logo-image {
margin: -10px 0 5px;
overflow: hidden;
}

You will then need to adjust the following within your custom.css – as follows:


.t3-mainnav {
border-left: 0 none;
border-radius: 0;
border-right: 0 none;
bottom: 125px;
float: right;
width: 1000px;
}

2. for the menu items to have the same space below the word (i.e. Home, Publishing, etc..) as it does above the word (the hover color)

Not entirely certain what you mean – can you clarify a bit more?

3. is there a way to get ride of that little line below the flags or do I need to make the black toolbar 5 px bigger to avoid that?

Did you add the following to your custom.css file?


#toolbar .toolbar-ct-3 {
border-left: none;

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530061

Wow! that totally worked ! Check it out!
http://baico.dev.dnsnetworks.ca/
You’re a genious! … what i meant about the 2. point is… here’s a graphic:

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530063

Okay, there is the basic idea of what you can do . . . .

Again, put the following within your custom.css file:


.navbar-nav > li > a {
border-left: 1px solid #0067A2
padding: 30px 10px 20px;
}

HELPFUL HINT:
The padding shorthand property sets all the padding properties in one declaration.
Example:
padding:30px 10px 20px;

• top padding is 30px
• right and left padding are 10px
• bottom padding is 20px

Another way to write it would be as follows:
padding:30px 10px 10px 20px;

• top padding is 30px
• right padding is 10px
• bottom padding is 10px
• left padding is 20px

To make it even easier for you, you can always write out all of the padding value properties
(as I started out doing before I memorized the shorthand version) – as follows:


.navbar-nav > li > a {
border-left: 1px solid #0067A2
padding-top: 30px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
}

So, you can play around with the pixel values for the margins until you get the final result you like.

😎

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530065

This looks great… however my spacing below the blue banner got a little small… what did I do wrong??
Oh I played around with the
.t3-spotlight-1 .t3-module {
margin-bottom: 0;
margin-top: -20px;
}

and fixed it! … you’re teaching me Tom!
Thanks Tom!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530066

Glad to have been able to help you out . . . Hope your client likes it.

🙂

1 user says Thank You to TomC for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530067

Oh me too! Thank you thank you thank you!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530158

Hey There . . . .

This may be out of place (being that I am neither the client nor the site developer (i.e. you)), but I had a constructive “aethetic/design” thought with regard to a little element of the site you’re working on.

When I was helping you with repositioning the logo yesterday, along the way I had the logo position slightly overlapping the header (blue bar) – so there was a slight half-circle just below the header.

To explain what I mean, try this temporary modification to the following CSS rule within your custom.css file . . .


.logo-image {
margin: 0 0 5px;
overflow: hidden;
}

See how positioning the logo image down just slightly (i.e. removing the -10px top margin property) creates a cool little “half-circle” display just slightly protruding from the blue-bar header? I think that looks kind of cool/nice – as it ever-so-slightly breaks up the “hard edge” of the header block. Make sense?

Not sure if your client will agree . . . but just thought I’d offer my two-cents worth of constructive/creative thought. 😎

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530175

Oh I like this! … but the only thing I would add is more spacing under the menu items now… to match with the amount of spacing on the top? What do you think?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530176

<em>@sebbs 420805 wrote:</em><blockquote>Oh I like this! … but the only thing I would add is more spacing under the menu items now… to match with the amount of spacing on the top? What do you think?</blockquote>

Personally – and with the “change” I mentioned above – I think things look pretty nicely and proportionate.
In my opinion, you don’t want too much “open/blank” real estate/space.

Again, just my personal “creative input” opinion. 😎

1 user says Thank You to TomC for this useful post

1. sebbs

[Author]

Posts