Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Spacing Of Top-Panel And Header: Which Code? Rate Topic   - - - - -

 
  • Fossils
  • Member
  • Members
  • Join Date: 18-Aug 16
  • 42 posts

Posted 19 October 2016 - 10:31 AM #1

Which part of the code controls the spacing between the top panel and the header? 

 

Attached image shows part of the site I am talking about...

 

I downloaded a CSS editor and open the styles.less file in an attempt to modify it to adjust the spacing, but given that I am new at this and have no idea what I am doing, I was unsuccessful...

 

presumably it is finding the right line of code and changing one number for amount of spacing to a lower number? Spacing, or padding, or margin or something like that?

 

http://fossils1.wwwls17.a2hosted.com/

 

 

Attached Thumbnails

  • Spacing-Example.PNG


 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4657 posts

Posted 19 October 2016 - 12:53 PM #2

In the styles editor try this change the 3px to whatever suits

.tygh-header > div {
    padding-top: 3px;
}

Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • Fossils
  • Member
  • Members
  • Join Date: 18-Aug 16
  • 42 posts

Posted 23 October 2016 - 12:54 PM #3

 

In the styles editor try this change the 3px to whatever suits

.tygh-header > div {
    padding-top: 3px;
}

 

John, thanks much. This helped! It reduced the space substantially by about half when I added that code to custom CSS and set it to 0px, but unfortunately didn't quite eliminate it. I tried negative numbers for px but they ended up putting it back to the big gap that was there originally. 

 

Any more ideas?  Maybe some sort of bottom margin or padding on top panel? 

 

your help is much appreciated!

 

There must be something else still forcing a big space. 

 

website: http://fossils1.wwwls17.a2hosted.com/

 

screenshots: http://fossils1.wwwl...-header-gap.png



 
  • BarryH
  • Senior Member
  • Members
  • Join Date: 03-Sep 07
  • 1459 posts

Posted 23 October 2016 - 01:18 PM #4

Hi

 

You need to comment out or remove ................. <div class="span16 top-menu-grid">

 

Using firefox "inspect element you can try this.

 

Regards

Barry


BarryH

 

CS-Cart v4.4.3 (Plus one being developed v4.5.2 SP2)
UK User


 
  • Fossils
  • Member
  • Members
  • Join Date: 18-Aug 16
  • 42 posts

Posted 23 October 2016 - 05:52 PM #5

Hi

 

You need to comment out or remove ................. <div class="span16 top-menu-grid">

 

Using firefox "inspect element you can try this.

 

Regards

Barry

 

Barry, that's brilliant. It removed almost all of the remaining gap! Sounds like Firefox is a good way to test code out!

 

Now I suppose I need to find the file to actually change this in --- is this a core file or something in a theme or which file would this be in? Hopefully this inspector tool can point me to the right file to change too? Or is finding the right file more complicated?

 

What is the best way to track down the corresponding file for the code you want to modify after inspecting to find the right section?

 

thanks for the tutorials!



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19782 posts

Posted 24 October 2016 - 08:25 AM #6

Add to the CSS section of the Theme editor this code

.tygh-header .top-menu-grid {
    padding-top: 0px;
}

Then open content of the HTML block with banner and remove first p tag.

 

Result:

 

http://prntscr.com/cy70um


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Fossils
  • Member
  • Members
  • Join Date: 18-Aug 16
  • 42 posts

Posted 24 October 2016 - 08:32 AM #7

Add to the CSS section of the Theme editor this code

.tygh-header .top-menu-grid {
    padding-top: 0px;
}

Then open content of the HTML block with banner and remove first p tag.

 

Result:

 

http://prntscr.com/cy70um

 

It worked!! thanks so much all for your help! Much appreciated!



 
  • BarryH
  • Senior Member
  • Members
  • Join Date: 03-Sep 07
  • 1459 posts

Posted 24 October 2016 - 04:44 PM #8

Glad you got it sorted, eComLabs is much smarter than me, I wouldn't have been able to tell you!

 

Regards

Barry


BarryH

 

CS-Cart v4.4.3 (Plus one being developed v4.5.2 SP2)
UK User


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19782 posts

Posted 25 October 2016 - 07:13 AM #9

It worked!! thanks so much all for your help! Much appreciated!

 

You are welcome!  :)


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.