Joomla Templates Club 406,261 posts

[dircomcem Friend dircomcemJoin date: September 2013Posts: 11Downloads:0Uploads:3 Thanks: 4 Thanked: 1 times in 1 posts]

#191265

How can I create a new theme and add it to the template?

I mean, I need the dark one but instead using pink, use yellow color in everything: links, buttons, module styles, headings, etc.

I understand I should create a new folder like: templates/ja_lens/themes/yellow, and declare it in templateDetails.xml file; but What .css files should copy from templates/ja_lens/css to templates/ja_lens/themes/yellow/css/ full override default style?

Also I know i need to create new images and upload to templates/ja_lens/themes/yellow/images.

What i need is to use three styles: dark/pink, dark/yellow and light in my site. Do not worry now about how to access them, because my site is goind to be used in a little diferent navigation mode than usual, so maybe with external links to category view url with &style=yellow param may work for me, if not i will have to create fake language files like someone explains in forum, but now that is not important.

Can somebody help me?

Thank you!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#508547

Hi dircomcem,

You can have a look at structure of light theme folder and create the same thing for yellow theme. Just create a new folder named ‘yellow’ and create 2 extra sub-folders ‘css’ – contains ‘theme.css’ file and ‘images’ – contains icons, images used for this yellow theme

BTW, the suffix for URL should be ?style=light 🙂

1 user says Thank You to Saguaros for this useful post

1. Spell

[dircomcem Friend dircomcemJoin date: September 2013Posts: 11Downloads:0Uploads:3 Thanks: 4 Thanked: 1 times in 1 posts]

#508787

yes, but css in the theme.css file does not contain all rules with pink color… Only some rules are overrided with this file. in example, How can I change the pink scrollbar? the “click to load more…” link backgroung? but only when I am using the yellow theme… So if I choose to use the pink (default) again I can swith all elements.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#508855

In each ‘theme.css file of each theme, we just provide some rules for that theme specific, you can override it easily, for example, if you want to change the background of the pink scrollbar in yellow theme, you can open ‘theme.css’ file in yellow folder and add this css rule:


.masonry .item-more:hover {
background: #de3068
}


By default, this css rule is defined in /templates/ja_lens/css/template.css file, if there is no theme override this rule, then it will use this rule in template.css file.

Hope this makes senses.

2 users say Thank You to Saguaros for this useful post

1. dircomcem
2. Spell

[dircomcem Friend dircomcemJoin date: September 2013Posts: 11Downloads:0Uploads:3 Thanks: 4 Thanked: 1 times in 1 posts]

#508947

It make sense… but i am not sure if works completely… I hay my doubts about it… but i will try. Thank you Saguaros.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#508957

You may also want to consider employing into your customization – to protect your new theme from being overwritten upon updating/upgrading various elements of your site.

2 users say Thank You to TomC for this useful post

1. dircomcem
2. Spell

[dircomcem Friend dircomcemJoin date: September 2013Posts: 11Downloads:0Uploads:3 Thanks: 4 Thanked: 1 times in 1 posts]

#508987

Thank you!!! for now it is working as Saguarus sugested. 🙂 But i think it is a great idea to prevent changes with the updates! I will check this soon. 🙂

[Author]

Posts