Forum Support

Shape 5
March 28, 2024, 08:37:32 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: How to reduce margin from breadcrumbs to first heading?  (Read 1852 times)
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« on: December 20, 2014, 11:03:14 AM »

As seen in the attached image, there is too much empty space. How can I reduce this area?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: December 22, 2014, 07:43:29 AM »

Hello,

You can add something like the following to custom.css:

#s5_bread_lang_holder {
margin-bottom:-50px;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« Reply #2 on: December 22, 2014, 07:44:44 AM »

Thank you Mike!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: December 23, 2014, 09:05:32 PM »

Let us know if you have any further questions
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« Reply #4 on: January 03, 2015, 07:23:58 AM »

Sorry to bother you again. I checked now with this code that you gave me above ... but nothing happends I am afraid.

I still have the big "gaps" present.

Any ideas on how to solve this?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #5 on: January 03, 2015, 07:54:01 AM »

Hello,

Try this instead:

#s5_bread_lang_holder {
margin-bottom:-50px !important;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« Reply #6 on: January 03, 2015, 08:00:23 AM »

No change I?m afraid. Any other ideas  Huh
Logged
speleo
Jr. Member
**
Offline Offline

Posts: 50



« Reply #7 on: January 05, 2015, 08:58:59 AM »

Chrome Developer Tools is your friend.  Learn how to use it here
https://developer.chrome.com/devtools/docs/videos
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #8 on: January 10, 2015, 04:33:47 PM »

I would also suggest looking at Firebug if you are using Firefox. It is a very useful tool for identifying specific areas on a website and seeing where the inherit CSS is coming from.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
jeffj
Jr. Member
**
Offline Offline

Posts: 43



« Reply #9 on: February 19, 2015, 12:22:33 PM »

chriddo, did you ever find out how to resolve this problem?  I have the same problem, and entering this code in the custom.css file did not work for me either?

Code:
#s5_bread_lang_holder {
margin-bottom:-50px !important;
}

http://www.go2japan.org/a2/
« Last Edit: February 19, 2015, 12:24:33 PM by jeffj » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #10 on: February 20, 2015, 05:11:58 PM »

Hello,

That's actually a different area than the original post. Try adding the following to custom.css:

#s5_header_spacer {
display:none;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
jeffj
Jr. Member
**
Offline Offline

Posts: 43



« Reply #11 on: February 20, 2015, 05:42:46 PM »

Hello,

That's actually a different area than the original post. Try adding the following to custom.css:

#s5_header_spacer {
display:none;
}

Actually, the original post (see chriddo's original screenshot) is the same thing I want to do, namely to reduce the margin from the breadcrumb to the top of the first article.

One screenshot I am attaching is NO-CODE. (As chriddo said, "There is too much empty space. How can I reduce this area?").

The other one is WITH-CODE that you suggested, which entirely removes the breadcrumbs.

I do want breadcrumbs to display. I just don't want so much white space around it. Hope this makes sense.

- jeff
« Last Edit: February 20, 2015, 05:45:48 PM by jeffj » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #12 on: February 20, 2015, 05:55:17 PM »

Hello,

There are really 2 areas here defining that space.

Code:
template.css - line 340

#s5_header_spacer {
    display: block;
    height: 94px;
    width: 100%;
}


template.css - line 515

#s5_center_area1 {
    padding-top: 120px;
}

You can go into those files to modify the padding's and height of the spacer block as needed. You can also alternatively add some large negative margins such as:

Code:
#s5_bread_lang_holder {
    margin-bottom: -100px !important;
    margin-top: -60px !important;
}
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
jeffj
Jr. Member
**
Offline Offline

Posts: 43



« Reply #13 on: February 20, 2015, 06:07:46 PM »

Ok, Mike, this is really helpful and exactly what I needed. Thank you for giving me those two lines in the template.css file.  I have adjusted them to my liking.

One related question about breadcrumbs... I don't know how to make the separators (e.g., > or | or // ) appear in my breadcrumbs. I've entered ">" but they don't appear.

- jeff
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #14 on: February 20, 2015, 06:10:54 PM »

Hello,

The separators should be built into an input field directly into the breadcrumb module options provided with Joomla. Generally we just leave it blank or use // in the input fields.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.