blog documentation FAQ followers forum marketplace services youtube

custom.css

The Jamroom Network » Forum » Suggestions » Page » custom.css
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
Not sure if this has been addressed yet but wanted to suggest this. Hope I explain this right:

I like the clone skin feature, but finding it cumbersome to keep updated w/ Skin updates.
So on one of my sites, I've left the default skin without cloning it.

Then, to add my customizations, I do the template override. As a result, whenever there is a skin update, I can leave templates overriden, then use the Compare button to see the most up-to-date template code and my customizations in a single view. No issues there.

The final piece, is that I've made SOME additions to the css files, that ARENT available in the CSS override section in ACP. For instance, I might have a custom style (say)
.block_config2 {
    float:right;
    margin:0px;
    white-space:nowrap;
	vertical-align:central;

}

So, in the overridden tpl file, I simply do the style=block_config2 and I can apply styling options that aren't always available in the css override section in ACP.

If a CSS file is updated as part of a skin update, the customization in the example above gets wiped out. That's expected.

What I'm suggesting is a separate custom.css file, that you can dump all one-off CSS styling codes to.

As a result admin would be able to
1. Override template files in ACP
2. Override (certain) CSS attributes in ACP.
3. Add any additional CSS styling (not affected by skin updates)

This allows admin to keep all their customizations (both template & CSS overrides, and one-off CSS stuff) while being able to just click update for any skin update.

What this resolves is the fact that although you have certain attributes available in the CSS override section, you dont have all of them, and you can't add customizations of your own in ACP.

Again, I like everything so far, it just seems like that's one missing piece...

Hope that makes sense.
Thoughts?
updated by @ilovehousemusic: 06/03/14 02:32:07AM
michael
@michael
10 years ago
7,746 posts
You could do that by over-riding meta.tpl and adding in your custom skin CSS to directly as the last .css file in the header.

That way you would always know that your custom.css file has the last say.

Its a good idea.
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
@michael - aaah. good idea.

Let me take a look at that. Thank you!

Again, I'm just trying to stay on top of Jamroom updates. No issues with the module updates. But with every skin update my cloned skin just gets farther and farther away from the current release.
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
@Michael - where would you recommend this in the meta.tpl (jrElastic)

<link rel="stylesheet" href="{jrCore_server_protocol}://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" type="text/css">
<link rel="stylesheet" href="{jrCore_css_src}" media="screen" />
{if isset($css_href)}
{foreach from=$css_href item="_css"}
<link rel="stylesheet" href="{$_css.source}" media="{$_css.media|default:"screen"}" />
{/foreach}
{/if}
{if isset($css_embed)}
<style type="text/css">
{$css_embed}</style>
{/if}
{if isset($javascript_embed)}
<script type="text/javascript">
{$javascript_embed}</script>
{/if}
<script type="text/javascript" src="{jrCore_javascript_src}"></script>
{if isset($javascript_href)}
{foreach from=$javascript_href item="_js"}
<script type="{$_js.type|default:"text/javascript"}" src="{$_js.source}"></script>
{/foreach}
{/if}
{if isset($javascript_ready_function)}
<script type="text/javascript">
$(document).ready(function(){
{$javascript_ready_function}return true;
});
</script>
{/if}
</head>

At the very bottom?
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
This doesn't seem to catch it. Do I have the syntax right for the href?
<link rel="stylesheet" type="text/css" href="custom.css" />
michael
@michael
10 years ago
7,746 posts
Yes the bottom. Put the full path to the CSS file

<link rel="stylesheet" type="text/css" href="{$jamroom_url}/skins/MY-SKIN/css/custom.css" />

Think that should work. Wondering now if its still going to be there after an update.... not sure. If thats the case, might need to put it somewhere that never changes.
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
@Michael - I understand, it's OK if during skin updates I need to reupload the custom.css to the new skin folder (example jrElastic 1.1.4). But at the very least, I can just upload that file and move on.

It would be nice if this was a default core feature somehow. Hence the suggestion.

I'll give that syntax a shot, thanks!
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
That worked BTW. Oh man, you just saved me a ton of editting. Thank you!
michael
@michael
10 years ago
7,746 posts
If you want to skip the re-upload all together, put it in its own custom module.
ilCustom

Then do all your customizations to that and it will always be there.

Do you use GIT? This is a one way to merge changes:
"Tip: a method for comparing file changes when updates come in from the marketplace"
http://www.jamroom.net/the-jamroom-network/documentation/development/1586/tip-a-method-for-comparing-file-changes-when-updates-come-from-the-marketplace

Glad you've got a system that works.

Tags