Canvas Support

Style.css code changes based on page?

4 replies · opened Nov 1, 2016

IivanpossNov 1, 2016

So I created an index.html page. On this page I have a video playing and wanted my logo to float and menu to float without borders. So I changed the various border attributes in primary menu section of css.styles to "0". Works perfectly- no menu borders....

... but now i am creating a page for one of the menu links...lets call it "catalog". So now "catalog" page has its menu borders turned off due to style.css. But I want them on for this pages layout. How do I code the style.css page to change primary menu style based on which page has loaded? Or is there a different method?

SSemicolon WebSTAFFNov 3, 2016

Hello,

It is Highly Recommended that you do not Edit the Default style.css File or any of the Default CSS Files to make your changes and instead use the css/custom.css File we have included in the Package/HTML Folder to modify and overwrite the Default Styles. This is particularly very useful when you need to Update Canvas to the Latest Version. Complete Usage Instructions regarding this can be found in the Documentation > Start > Customization Section. So, now you can add your Custom CSS codes in the css/custom.css File and it should work fine.

Additionally, you can also create Multiple Custom CSS Files with different names and link them in your Document <head> on the Pages you want to use those Particular CSS Codes.

Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

IivanpossNov 3, 2016

Thank you- I will restore my original styles.css via a backup copy and implement the instructions found in this response.

IivanpossNov 3, 2016

Hello

ok so I restored the original styles.css. I created a new custom.css that I called "customcss-noborder.css" and struggled a little finding the right code to adjust for the border. Then I linked it in the html header of the landing page... and its working. Thanks!
Below are the 3 adjustments in the new custom css to make the border disappear. Even though it seems to be working could you verify that these are the correct sections to adjust please?

#header.full-header #primary-menu > ul {
float: left;
padding-right: 15px;
margin-right: 15px;
border-right: 0px ;
}

#header.full-header #logo {
padding-right: 30px;
margin-right: 30px;
border-right: 0px solid #EEE;
}

#header.transparent-header.full-header #header-wrap { border-bottom: 0px ; }

SSemicolon WebSTAFFNov 4, 2016

Hello,

Please consider using the following CSS code for this: 

#header.full-header #header-wrap { border-bottom: 0 !important; }

#header.full-header #logo,
#header.full-header #primary-menu > ul { border-right: 0; }

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard