: How to reduce margin from breadcrumbs to first heading? : chriddo 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?
: Re: How to reduce margin from breadcrumbs to first heading? : mikek 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; } : Re: How to reduce margin from breadcrumbs to first heading? : chriddo December 22, 2014, 07:44:44 AM Thank you Mike!
: Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll December 23, 2014, 09:05:32 PM Let us know if you have any further questions
: Re: How to reduce margin from breadcrumbs to first heading? : chriddo 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? : Re: How to reduce margin from breadcrumbs to first heading? : mikek January 03, 2015, 07:54:01 AM Hello,
Try this instead: #s5_bread_lang_holder { margin-bottom:-50px !important; } : Re: How to reduce margin from breadcrumbs to first heading? : chriddo January 03, 2015, 08:00:23 AM No change I?m afraid. Any other ideas ???
: Re: How to reduce margin from breadcrumbs to first heading? : speleo 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 : Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll 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.
: Re: How to reduce margin from breadcrumbs to first heading? : jeffj 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?
: #s5_bread_lang_holder { margin-bottom:-50px !important; } http://www.go2japan.org/a2/ : Re: How to reduce margin from breadcrumbs to first heading? : mikek 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; } : Re: How to reduce margin from breadcrumbs to first heading? : jeffj 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 : Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll February 20, 2015, 05:55:17 PM Hello,
There are really 2 areas here defining that space. : 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: : #s5_bread_lang_holder { margin-bottom: -100px !important; margin-top: -60px !important; } : Re: How to reduce margin from breadcrumbs to first heading? : jeffj 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 : Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll 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. : Re: How to reduce margin from breadcrumbs to first heading? : jeffj February 20, 2015, 06:58:36 PM Mike,
Yes, I have entered ">" into that breadcrumb module. I also tried "|" and "//" as well. Nothing works. The separator area is always blank. This worked fine on the previous S5 template I used for this site. I just thought there might be a bootstrap issue for this. - jeff : Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll February 20, 2015, 07:05:59 PM Hello,
Maybe try checking what the font values are set as. I have seen issues occur when font values are set as "em" values instead of "px" values in bootstrap. : Re: How to reduce margin from breadcrumbs to first heading? : jeffj February 20, 2015, 07:21:56 PM Hello, Maybe try checking what the font values are set as. I have seen issues occur when font values are set as "em" values instead of "px" values in bootstrap. Sorry for my ignorance, but where would I find the values in bootstrap? : Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll February 20, 2015, 07:28:34 PM Can you post a URL where you have set the back end values for the breadcrumb input to // please.
: Re: How to reduce margin from breadcrumbs to first heading? : jeffj February 20, 2015, 07:36:31 PM I haven't entered anything for bootstrap, other than the Vertex setting in the template admin area. I didn't edit any CSS for bootstrap. Everything has been pretty much default.
The only place I edited the breadcrumb separator text is in the Breadcrumb module in the module mgr. And there's no place for px or em. : Re: How to reduce margin from breadcrumbs to first heading? : jeffj February 20, 2015, 07:50:48 PM Here's the bootstrap section in Vertex...
: Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll February 21, 2015, 07:54:42 PM Hello,
Please post a URL as requested. : Re: How to reduce margin from breadcrumbs to first heading? : jeffj February 21, 2015, 09:22:44 PM http://go2japan.org/a2/blog
: Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll February 21, 2015, 10:24:35 PM Hello,
Remove this from the Template.CSS file. : #s5_breadcrumb_wrap .divider { display: none; } : Re: How to reduce margin from breadcrumbs to first heading? : jeffj February 21, 2015, 10:35:46 PM In what line does it appear? I ran a search and that line of code did not appear.
: Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll February 21, 2015, 11:11:01 PM 470
: Re: How to reduce margin from breadcrumbs to first heading? : jeffj February 21, 2015, 11:13:10 PM Perfect! Thanks Mike!
: Re: How to reduce margin from breadcrumbs to first heading? : mikenicoll February 21, 2015, 11:38:35 PM No problem :)
|