How to Connect the stylesheet to the template ?

**GK User** Wed Feb 15, 2012 3:36 pm

Good day! My site - expresspaint.ru
Show me please, how to connect my css file to the template coffe

I understand that I need to register this line -

Code: Select all: <link href="<?php echo $template_baseurl; ?>/css/css3buttons.css" rel="stylesheet" rel="stylesheet" media="all" type="text/css"/

in the file where the template styles are connected.
Tell me, what is the file? What I need to write in templateDetails.xml?

**GK User** Wed Feb 15, 2012 4:34 pm

Hi

You can added as:

Code: Select all: <link rel="stylesheet" type="text/css" href="https://d177r47olzwju3.cloudfront.net/forum/styles/prosilver/theme/buttons.gz.css" />

inside <head> </head> tags on ../templates/gk_coffe/layouts/default.php

Cheers

**GK User** Wed Feb 15, 2012 6:57 pm

I have written to a file - /templates/gk_coffe/layouts/default.php
Code not Work!
But your forum does not normally enter the code and attach to the subject of drawing!
What should I do?

**GK User** Wed Feb 15, 2012 7:03 pm

I do not understand, why connect the styles in the head if I need to connect the css for the entire site. Can I add a css / templates / gk_coffe / index.php?
I would have you all completely written, but the forum is not working correctly.

**GK User** Fri Feb 17, 2012 9:02 am

You answer me? I need to connect the css to the template. By connecting this way, as you showed me the css styles do not work.

**GK User** Fri Feb 17, 2012 10:16 am

Find File: \templates\gk_coffe\layouts\blocks\head.php
Find Lines: 30 to 35 which is css lines similar to below

Code: Select all: $this->addCSS($this->URLtemplate() . '/css/k2.css');

Add after above line below code

Code: Select all: $this->addCSS('https://d177r47olzwju3.cloudfront.net/forum/styles/prosilver/theme/buttons.gz.css');

So it looks like below.

Code: Select all: $this->addCSS($this->URLtemplate() . '/css/gk.stuff.css'); $this->addCSS($this->URLtemplate() . '/css/k2.css'); $this->addCSS('https://d177r47olzwju3.cloudfront.net/forum/styles/prosilver/theme/buttons.gz.css');

See you around...

**GK User** Sun Feb 19, 2012 6:16 pm

The template in stile1.css has the following code -

Code: Select all: #gkButtons a { background: transparent url('../images/style1/bottom_bg.jpg') no-repeat 0 0; color: #fff; } #gkButtons a:hover { color: #585048; } #gkButtons a span { border: 1px dashed #dad6ce; border-top: none; background: transparent url('../images/style1/bottom_bg.jpg') no-repeat 0 -17px; } #gkButtons a.activated { background: transparent url('../images/style1/menu_bg.jpg') repeat 0 0; } #gkButtons a.activated span { background: transparent url('../images/style1/menu_bg.jpg') repeat 0 -26px; } #gkButtons a.activated:hover span { color: #bf7233; }

This code prevails over the code that I attached. How to disable the template code?
I attached the Css, I ordered a template.

I can include my css after then -

Code: Select all: $this->addCSS($this->URLtemplate() . '/css/style'.$template_style.'.css');

**GK User** Mon Feb 20, 2012 12:32 pm

If you look at the same file i suggested for you to edit css files get loaded in order. So if you place your css files at last then they will overwrite previous classes. So follow below.

1. Upload new css file.
css3 buttons. css -> "\templates\gk_coffe\css\"

2. Upload new image files.
css3buttons_backgrounds.png -> "\templates\gk_coffe\images\"
css3buttons_icons.png -> "\templates\gk_coffe\images\"

3. Placing css loading codes in head.php

Current layout or order of css files.

Code: Select all: // load the CSS files if($this->getParam('reset_css', '') != '') { $this->addCSS($this->URLtemplate() . '/css/reset/'.$this->getParam('reset_css', '').'.css'); } $this->addCSS($this->URLtemplate() . '/css/layout.css'); $this->addCSS($this->URLtemplate() . '/css/joomla.css'); $this->addCSS($this->URLtemplate() . '/css/template.css'); $this->addCSS($this->URLtemplate() . '/css/menu.css'); $this->addCSS($this->URLtemplate() . '/css/gk.stuff.css'); $this->addCSS($this->URLtemplate() . '/css/k2.css'); if($this->getParam('typography', '1') == '1') { $this->addCSS($this->URLtemplate() . '/css/typography.style'.$template_style.'.css'); if($this->getParam('typo_iconset1', '1') == '1') $this->addCSS($this->URLtemplate() . '/css/typography.iconset.1.css'); if($this->getParam('typo_iconset2', '1') == '1') $this->addCSS($this->URLtemplate() . '/css/typography.iconset.2.css'); if($this->getParam('typo_iconset3', '1') == '1') $this->addCSS($this->URLtemplate() . '/css/typography.iconset.3.css'); } $this->addCSS($this->URLtemplate() . '/css/style'.$template_style.'.css'); if($this->getParam("css_override", '0')) { $this->addCSS($this->URLtemplate() . '/css/override.css'); }

Your order should be as below, if any classes are still getting overwritten simply change them around. Notice i have added your new css files after stylex.css depending on style selection in admin panel template settings.

Code: Select all: // load the CSS files if($this->getParam('reset_css', '') != '') { $this->addCSS($this->URLtemplate() . '/css/reset/'.$this->getParam('reset_css', '').'.css'); } $this->addCSS($this->URLtemplate() . '/css/layout.css'); $this->addCSS($this->URLtemplate() . '/css/joomla.css'); $this->addCSS($this->URLtemplate() . '/css/template.css'); $this->addCSS($this->URLtemplate() . '/css/menu.css'); $this->addCSS($this->URLtemplate() . '/css/gk.stuff.css'); $this->addCSS($this->URLtemplate() . '/css/k2.css'); if($this->getParam('typography', '1') == '1') { $this->addCSS($this->URLtemplate() . '/css/typography.style'.$template_style.'.css'); if($this->getParam('typo_iconset1', '1') == '1') $this->addCSS($this->URLtemplate() . '/css/typography.iconset.1.css'); if($this->getParam('typo_iconset2', '1') == '1') $this->addCSS($this->URLtemplate() . '/css/typography.iconset.2.css'); if($this->getParam('typo_iconset3', '1') == '1') $this->addCSS($this->URLtemplate() . '/css/typography.iconset.3.css'); } $this->addCSS($this->URLtemplate() . '/css/style'.$template_style.'.css'); $this->addCSS('https://d177r47olzwju3.cloudfront.net/forum/styles/prosilver/theme/buttons.gz.css'); this->addCSS($this->URLtemplate() . '/css/css3buttons.css'); if($this->getParam("css_override", '0')) { $this->addCSS($this->URLtemplate() . '/css/override.css'); }

This should fix your current problems as your chosen css files are loaded last so they will overwrite previous classes if class names are same.

See you around...

**GK User** Sat Feb 25, 2012 7:43 am

See what I see on forum in your and my messages -

css_exp.png

You can send a screenshot of the code?

**GK User** Sat Feb 25, 2012 7:55 am

Just noticed this , for some reason it is converting file name to that url.

I've attached "head.zip" file which contains "head.php". I have already included your css file in this code you can see it in line 47 Between "Load custom css file".

See you around...

**GK User** Sat Feb 25, 2012 9:05 am

I wrote you have sent the file to the hosting.
Look at this page of the site - http://www.expresspaint.ru/zhivopis.html
The button does not change based on the styles of my css. Styles Template is not disabled. I think you just need to comment out the styles in the template are in my way.

**GK User** Sat Feb 25, 2012 9:19 am

Class name has to match class names in css files for it to work properly.

See button " Просто кнопка " on the right does take effect based on your css and it gets its values from your added css file.
For the rest of the files you just have to change either css class in php code or make changes in other css files etc.

See you around...

**GK User** Tue Feb 28, 2012 8:34 pm

I renamed the classes in my css-file and it worked. You can see

**GK User** Tue Feb 28, 2012 11:50 pm

Glad to hear it worked , see you around...

**GK User** Wed Feb 29, 2012 11:58 am

Very Thank YOU!

**GK User** Fri Mar 02, 2012 9:04 am

No problem at all, see you around...