Various formatting CSS

Support
#1

Hi - please help me with a short list of CSS tweaks for dickenscarolers.ca. There is only a home page.

  1. The paragraph text is currently set to the lightest weight available at 300. Please tell me how to set this lighter - to 200. Do I need to install anything, or simply use CSS?

  2. After page load, the Revolution Slider in Section 1 has a top margin and the navbar is partially hidden above the fold. After scrolling, this alignment glitch corrects itself, so that the navbar is properly aligned to the page top and the Revolution slider has no top margin… Please show me how to make the page load without this alignment glitch.

  3. I want to create more horizontal margin between the footer menu links.

  4. I want to create a larger vertical margin between the top of the footer links and the top of the footer.

Thank you very much. Your support is the best I have encountered, and I am pleased to continue buying Themeco products.

#2

Hi,

  1. It depends on the font that you are using. I can see you are using the default Lato font

Lato only have 100 , 300 , 400 … font weights

To add all the font weights, you can ad the code below in Appearance > Customize > Additional CSS

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
  1. To fix this, you can add the code below in X > Launch > Options > CSS 
.admin-bar  .x-navbar {
      top: 32px;
}

3 & 4) You can add the code below in X > Launch > Options > CSS

.x-colophon.bottom a {
    padding: 10px 5px 10px 5px;
}

Change 10px and 5px to adjust the spacing.

Guide
padding:top right bottom left;

Hope that helps

#3

Thank you for providing this information.

The font issue is resolved, and so is the vertical banner margin / glitch. :slight_smile:

The padding for the x colophon area is not responding, and I am suspecting that I may have a code conflict. I am not able to make it change. This is what the global CSS currently looks like:

.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}
.x-colophon.bottom {
background-color:rgb(16, 38, 66);
}
.x-colophon.bottom .x-nav li a {
color: #999999;
font-size: 14px;
text-decoration: none;
}
.x-colophon.bottom .x-colophon-content a {
color: #999999;
font-size: 10px;
text-decoration: none;
}
.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
color: white !important;

}
.x-colophon.bottom a {
padding: 20px 0px 20px 0px !important;
}
.admin-bar .x-navbar {
top: 32px;
}

At present, I am trying to adjust only the top and bottom values. Thanks again.

#4

Hi again,

I checked your site and your code is working as expected. However to adjust the padding of x colophon area, you can make use of the following code:

.x-colophon.bottom {
    padding: 0 !important;
}

Hope this helps!