where I can change the color for the header

18 replies · opened Apr 16, 2016

Ffico1970Apr 16, 2016

Hi,
I have a few questions :

1/I cant found where I can change the color for the header "transparent-header semi-transparent dark full-header"

2/how to make the slider auto start and run in loop

3/ what is the recommended dreamweaver version to use (I use now cs3, but too many crash when I try to open the html files)

Regards,
Rafik

SSemicolon WebSTAFFApr 17, 2016

Hello,

  1. You can change the BG Color of the Header by adding the following CSS code:
.dark #header.semi-transparent,
.dark #header.semi-transparent.floating-header .container,
#header.dark.semi-transparent,
#header.dark.semi-transparent.floating-header .container { background-color: rgba(0,0,0,0.6); }

.dark #header.semi-transparent.sticky-header #header-wrap,
#header.dark.semi-transparent.sticky-header #header-wrap { background-color: rgba(0,0,0,0.6); }
  1. You can simply add the data-autoplay="5000" attribute to the #slider Element. 5000 is 5 Seconds in milliseconds.

  2. We Really Apologize but currently Dreamweaver is not supported due to some unidentified issues with Twitter Bootstrap which cause the Dreamweaver to slow up while viewing the HTML Files. We are yet to solve this issue but we will surely release an Update once we fix it. We Really Appreciate your Patience with this. We recommend you to use a Text Editor like the Powerful Sublime Text or Notepad++. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Ffico1970Apr 17, 2016

Hi,
what is the file where I have to add the provided css code ?

Regards,
Rafik

Ffico1970Apr 17, 2016

Hi,
also I want to make the slider autoplay and loop for the page index-fullscreen-slider.html

Regards,
rafik

SSemicolon WebSTAFFApr 18, 2016

Hello,

  1. Please add the CSS Code in the css/custom.css File and Link it in your Header. For Full Instructions, please check Documentation > Start > Customization Section.

  2. Simply find the following line of code on your Page:

and replace it with:

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

Ffico1970Apr 18, 2016

Hi,
slider is fine now ;)

but I still can't change the header color (I have added the css code to custom.css and linked it to my page) but not work :(

thanks for your support,

regards,
rafik

SSemicolon WebSTAFFApr 19, 2016

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFApr 20, 2016

Hello,

We have just checked out your Website and the css/custom.css File seems to be working fine. Please change the rgba(0,0,0,0.6) value in the css/custom.css File to your Preferred Color and you will surely see the change taking place.

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

Ffico1970Apr 20, 2016

Hi,
many thanks, work fine for index-fullscreen-slider.html

but cant get the same effect for the 2 other html files (no transparency and also when I go to the bottom page the header color change)when I use scroll bar.

thanks again,

regards,
rafik

SSemicolon WebSTAFFApr 21, 2016

Hello,

It seems that the Styles from the css/dark.css File are getting prioritized which is why it was not working. Please find the following code in the css/custom.css File:

.dark #header.semi-transparent.sticky-header #header-wrap,
#header.dark.semi-transparent.sticky-header #header-wrap { background-color: rgba(0,0,0,0.6); }

and replace it with:

.dark #header.semi-transparent.sticky-header #header-wrap,
#header.dark.semi-transparent.sticky-header #header-wrap,
#header.dark.sticky-header.transparent-header #header-wrap:not(.not-dark) { background-color: rgba(0,0,0,0.6); }

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

SSemicolon WebSTAFFApr 26, 2016

Hello,

According to your Issue, it appears that there are more Menu Items in your Header than it can accommodate in the available width. Please consider adding the following CSS code:

.device-md #primary-menu ul li a {
	padding: 0 12px;
	font-size: 12px;
	letter-spacing: 0;
}

This should fix your issue. Let us know if we can help you with anything else or if you find any further issues.

Ffico1970Apr 26, 2016

Hi,
I have added the code but now the menu go at the top of the page,

attached a screenshot

Thanks again

regards,
rafik

SSemicolon WebSTAFFApr 26, 2016

Hello,

Really Apologize about the previous code. Please use this CSS Code instead:

.device-md #primary-menu ul li a {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 12px;
	letter-spacing: 0;
}

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

Ffico1970May 14, 2016

Hi,

work but only If I use :
11px instead of :

padding-left: 12px;
padding-right: 12px;

Regards,
rafik

SSemicolon WebSTAFFMay 16, 2016

Hello,

You are definitely welcome to use the styles best suitable for your Website. If 11px is works fine and then it is definitely recommended that you use it.

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

Ffico1970May 24, 2016

Hi,
many thanks again for your great support,

between; very nice template !! already made 4 website and my customer are really happy :)

SSemicolon WebSTAFFMay 25, 2016

Hello,

Thank You so much for the Kind Words! :) Very Happy to Help! Really Glad that Canvas was useful for your Clients.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

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