Jump to content

[Resolved] Modifying minimaliser skin does not apply


Recommended Posts

Hello,

I am a new user.
I like minimaliser skin and i would like to add an orange color (or other)

I followed the how to described in config.xml , after blue

<style images="true">
	  <directory>blue</directory>
	  <name><![CDATA[Blue]]></name>
	  <description><![CDATA[Blue style]]></description>
	</style>
  <style images="true">
	  <directory>orange</directory>
	  <name><![CDATA[Orange]]></name>
	  <description><![CDATA[Orange style]]></description>
	</style>
  </styles>
  <layout>

 

then i copied "blue" folder and changed to "orange" name.

I modified navigation.css "top-bar" color to see it in action :

 

/* !Orange */

.top-bar {
	overflow: hidden;
	height: 2.8125rem;
	line-height: 2.8125rem;
	position: relative;
	background: #e09b32; /* #90a1b2; */
	margin-bottom: 0;
}

 

Fisrt, how can i dynamicaly update list of color in admin control box ? (or update list of color listed in xml file ) i get it but i dont know how to ....:huh:

Second, when i select orange in admin layout control box, (and save) , theskin change but not top-bar :huh:

I tried to delete cache file with no success .

 

Hope somebody will understand me and my problem.
Thanks, 
Best regards.

 

Link to comment
Share on other sites

Welcome Stevanovich! Glad to see you made it to the forums.

CubeCart does not have the means to administratively modify skin designs or the color palette. Some skin authors have added that ability as part of the skin package, but CubeCart itself does not do this. (You may be thinking about how WordPress does things like this.)

Please examine the source HTML received by your browser. Your browser may have a diagnostic/developer console that will show you this. Make sure the CSS file that being requested is from the /orange/ folder. The developer panel may also be able to show you the CSS rules that are in play. It could be the case that the top-bar background is being overruled elsewhere.

If your site is publicly accessible, let us know its web address and we can take a look.

 

Link to comment
Share on other sites

9 hours ago, bsmither said:

Welcome Stevanovich! Glad to see you made it to the forums.

 

If your site is publicly accessible, let us know its web address and we can take a look.

 

Thank you for your welcome message.
I understand that it was not possible to directly modify a skin from the administration interface, we can just change the parameters defined by the creator of the skin.

What I have done :
I added the orange property in the skin options list. (As explained in the tutorial provides)
I created the orange directory with associated files

Now I have the Orange option available in the admin interface of the skin
However, on display, the orange skin does not take into account the top-bar properties

Here's the link to test and understand what's going on.

my link

I authorized the change of skin by the user, "minimize Orange" is the default

@media only screen and (min-width: 40.063em)
navigation.css:1
.top-bar {
    background: #7499c2;
    overflow: visible;
}

Maybe i did not modify good top-bar properties ?

 

thanks for help.

regards

Link to comment
Share on other sites

The CSS rule above looks strange.

This is how I would write it:

@media only screen and (min-width: 40.063em)
{ /* at-rules should nest other rules */
  /* navigation.css:1 */
  .top-bar {
    background: #7499c2;
    overflow: visible;
  }
}

Your second line (my third line) is now a comment as it is not a CSS property.

Link to comment
Share on other sites

 

I am sorry,

I have expressed myself very badly.
The previous lines of the css code correspond to the display result of the skin Orange in use, extracted from google console :

@media only screen and (min-width: 40.063em)
navigation.css:1
.top-bar {
    background: #7499c2;
    overflow: visible;
}

 

And here is what is in my css ;

/* !Orange */

.top-bar {
	overflow: hidden;
	height: 2.8125rem;
	line-height: 2.8125rem;
	position: relative;
	background: #e09b32;
	margin-bottom: 0;
}

 

And i asked why my change is not apply to Orange skin ?

 

 

Link to comment
Share on other sites

Your custom CSS is being applied, but then is immediately being overruled.

In the file /orange/navigation.css, line 20, there is the change in the background to the top-bar class.

However, at line 378 (a later rule overrules previous rules), there is a media group for medium up that sets the background color for the top-bar class.

I suggest you edit the rules in the media groups if you want different effects based on viewport size, or make universal changes at the bottom of the file.

Then force your browser to reload the page resources.

Link to comment
Share on other sites

2 hours ago, bsmither said:

However, at line 378 (a later rule overrules previous rules), there is a media group for medium up that sets the background color for the top-bar class.

Then force your browser to reload the page resources.

Thanks so much :coolthumb:

Now works as i want .

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...