The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 02-16-2016, 06:17 PM
Welshgrass's Avatar
Welshgrass is offline
Junior Member
 
Join Date: Feb 2016
Posts: 6
Default

Change attributes for View As: panel


I am trying to style the "View As: Grid List" panel with custom CSS but although I can change it in Safari developer mode i cannot seem to change it in the ECWID Design panel.

I can lose it completely with:

div.ecwid-results-topPanel{
display: none !important;
}


but if I try to increase the text size using the code below nothing happens:

div.ecwid-results-topPanel{
font-size: 20px;
}


Something else is overriding the custom CSS. Any ideas if/how I can style this part of the store?

Many thanks in anticipation
  #2  
Old 02-16-2016, 07:49 PM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

Try with something more specific
Code:
div.ecwid-results-topPanel-viewAsPanel div {
    font-size: 20px;
}
The Following 3 Users Say Thank You to Maristany For This Useful Post:
Stacy_P (02-21-2016), Welshgrass (02-16-2016), Wendy (02-17-2016)
  #3  
Old 02-16-2016, 08:06 PM
Welshgrass's Avatar
Welshgrass Welshgrass is offline
Junior Member
 
Join Date: Feb 2016
Posts: 6
Default

Thanks Maristany that works beautifully.

I must take more note of the little grey triangles in Safari developer mode - I was not seeing the nested divs until clicking on them!

Being new to Ecwid and CSS when should a "div" be used before the "{" as none of the examples I've seen so far use that?
  #4  
Old 02-17-2016, 09:50 PM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

You're welcome, the thing with selectors is that they're very flexible and in this case there's a rule in the default theme that sets the font size of div's in the "Top Panel" (Items Count, View As and Sort By)
Code:
div.ecwid-results-topPanel div {
    color: #333;
    font-size: 11px;
    font-weight: 400;
    display: inline-block;
}
You could have used that selector but as you just wanted to change "View As" panel div's, it was "div.ecwid-results-topPanel-viewAsPanel div".
The Following User Says Thank You to Maristany For This Useful Post:
Stacy_P (02-21-2016)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:58 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.