Solved

Where is the css file that classes in wpsc-products_page.php reference please?

Posted on 2014-03-01
21
301 Views
Last Modified: 2014-03-18
I'be bought the Zeni wordpress theme which is suitable for wp e-commerce and am building my shop. However, the default layout is messy, inconsistent fonts and centering, so I'd like to edit the elements, but when I locate the various classes eg class="prodtitle entry-title" that are referenced in wpsc-products_page.php, I can't find them, in any of the stylesheets within the wp e-commerce folder. Can anyone help me to edit my product pages please?

many thanks in advance....
0
Comment
Question by:Juliamac
  • 10
  • 7
  • 2
  • +1
21 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
That is common with these themes.  They make them look good only for the sample but they are crap on the inside.  The best thing is to create a child theme and override the css elements there.

https://codex.wordpress.org/Child_Themes
0
 

Author Comment

by:Juliamac
Comment Utility
Ok, thanks. But as this will take longer than I anticipated and I am a Wordpress newbie, would you know if in the meantime I can upload the rest of their Wordpress site to their old domain but still reference their old online shop until I've edited the new one? ie if I can point wordpress to an external page, is it as simple as adding a link to the online shop page?

Thanks
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I'm not sure I totally follow what you are asking.

>is it as simple as adding a link to the online shop page
If that is on another site or folder I don't see why not.
0
 

Author Comment

by:Juliamac
Comment Utility
I mean that so far the menu has been auto-generated , I wondered if it's possible to add an external page directly into the wordpress menu. So that users can click on the Wordpress menu link and go to the original shop whilst I'm busy reskinning the new one...I just ried and what I get is my new online shop page appearing with a link on the page to the old one...

Also - does you/anyone know if you can use one theme ie Zeni as I've already bought it and a second, prettier one for wp e-commerce at the same time please.

Thanks!
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
Comment Utility
You can use multiple themes by applying the theme to the page.  For your link, just change the navigation to point to the old.  

Think about what you paid... $10? $30? $50?  Any of those prices are throw away.  If you don't like it, just use something else.  If you saved 15 minutes by using what you really want, you made up for the $30 learning experience.  

Check out http://www.woothemes.com/woocommerce/
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 250 total points
Comment Utility
Agree with Scott.  Using a Child Theme is a commonplace exercise, and really easy to do.  You will need to get some understanding of WordPress, and this means a book or two, or perhaps a lot of online searching and reading.  Once you have a feel for the process, create a very simple Child Theme that does something modest like changes the color of the background.

The reason for the Child Theme concept is that the Parent Theme can change, and if you get the updated Parent Theme, you don't want to overwrite all of the programming you did for the Child Theme.
0
 

Author Comment

by:Juliamac
Comment Utility
Hi both,

I really appreciate your feedback, but the reason I want to stick with the theme I bought is because I've edited it and for the main part it's looking great, it's just that I need to edit the shop pages aswell and can't find the css files...does anyone out there know where to locate them please?

thanks guys!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
What if the theme gets updated and perhaps for some security reason.  If you accept the update, your changes get overwritten.

Let's say the theme has the following css

ul.special_deal li{
   margin-bottom:30px;
}
ul.special_deal li a{
   font-size:24px;
   color:red;
   text-decoration:underline;
}

Open in new window

Let's say you really don't like the underline and just want to keep it red.  You would simply  update the child theme with one entry as if you added a 2nd style sheet below the original.
ul.special_deal li a{
   text-decoration:none;
}

Open in new window

Thinking about long term, it might be a good idea to figure out your changes and apply to a child theme.  It will be a minor set back for long term gain.

As far as editing the shop pages.  Please post a link to your site for us to look at.  If you can't easily find them, it is possible they are hosted elsewhere.  If you know how to use your browser's console, you can use that to determine what is loading where on your site.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
What if the theme gets updated and perhaps for some security reason.  If you accept the update, your changes get overwritten.

You can get around this somewhat by installing the Jetpack plugin for WordPress.  It allows you to create a custom.css file that would survive a theme update.  It's a little simpler than creating a child theme but also a lot less flexible.  Child themes are still the way to go.

Agree with Scott, though...post a link and we can tell you which CSS file is used. You can do this too by right clicking in the browser and selecting Inspect Element.
0
 

Author Comment

by:Juliamac
Comment Utility
Hi,

Here's the link:

http://www.test.thehandweavingcompany.co.uk/products-page-2/looms/

When I look at Inspect Element and make edits in the corresponding file - wpsc-default.css such as changing text alignment, and attempting to get rid of the shadow image under the product image, the changes don't seem to be reflected - this is why I'm confused - have tried several times, so I am sure I'm editing and uploading the right file...very grateful for further feedback!
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Which are your specific edits?  What are you trying to change?
0
 

Author Comment

by:Juliamac
Comment Utility
I just want consistent fonts and text alignment and to get rid of the second image box under the product image...I thought fonts must be inherited but that makes no sense if they're different, can't see what's dictating the different font for 'Size:' for example...
0
 

Author Closing Comment

by:Juliamac
Comment Utility
Thanks guys - looking into child themes using underscore as a base.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
>I thought fonts must be inherited ....can't see what's dictating the different font for 'Size:'

Fonts are first set in the browser and if there are no font declarations in the css or page, the default browser fonts are used.  When fonts are set in css or inline, the browser will use the last set of information given.

<div class="special item"><a href="#">book</a></div>

Open in new window

Running the above without any css, you would probably see 'book' in blue and underlined.
Let's say you have 2 style sheets, "theme.css" and "custom.css"
<link rel='stylesheet'  href='/css/theme.css' type='text/css' media='all' />
<link rel='stylesheet'  href='/css/custom.css' type='text/css' media='all' />

Open in new window

In theme.css you have the following
a{color:red;}

Open in new window

and in custom.css you have
.item a{color:green;}

Open in new window

The color of the font will end up being green
To add on, lets say you have some jquery/js code that will change that color to brown.  If you look in the console, you will see your rendered code has been modified and could look like below
<div class="special item"><a href="#" style="color:brown">book</a></div>

Open in new window

Now your font will be brown because the inline style set the color after the two style sheets.

On your sample page, I think I counted 13 style sheets, 2 places where css was in a <style>tag and about 20 places where styles where set inline even before using any js code.

Your site is typical for a lot of wordpress themes.  How can you easily see what is dictating the font size?  I think most of us will use the browsers console. I use chrome https://developers.google.com/chrome-developer-tools/ and you can find similar tools using firefox, safari and IE.
console shotI can see that the h2 tag gets it's color from the entry-content.css file line 7
.entry-content a {
color: #A2875C;
}

Open in new window

As I scroll down the right side of the console, I do not get any clues about the size.  I can see "font-size" but crossed out. That means that element tried to set the font size but something else set the size after.  The next thing I do in the console is to click on the code directly above. In this case, I clicked on the, <h2 class="prodtitle entry-title">

I can see some font info on the style.css line 66
media="all"
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
font-weight: 400;

Open in new window

and line 73
media="all"
h2 {
font-size: 36px;
}

Open in new window

It's a lot like math - order of operations.  It is not always easy to understand.
0
 

Author Comment

by:Juliamac
Comment Utility
Hey thanks so much, that's really helpful. Can I ask if you know of a quick reference for all these css rules etc or is it just experience?
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
You will probably find this useful:
http://reference.sitepoint.com/css

See also these, which are worth the investment of your time and money:
http://www.amazon.com/dp/1449325947/
http://www.amazon.com/dp/1593272863/

And this comment from one of my colleagues may give you some guidance for planning your learning adventures.  "I never really 'got' CSS until I learned jQuery."
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I would agree about css and jquery.  The more you use js/jquery, the  more you understand the difference between a html ID and CLASS.  

Because there are so many aspects to building a website and we don't have that port in the back of our head like the Matrix, it is best to learn one thing at a time and not try and take it "all" in at once.

I think the way to go is have a good base of HTML and CSS.  Then venture a bit into javascript basics, learn jquery and that will help you learn more advanced js.  We all learn in different ways, I do best by getting my hands dirty and code academy is a good place to go after a bit of reading http://www.codecademy.com/learn
0
 

Author Comment

by:Juliamac
Comment Utility
Excellent - thanks again for all your advice!
0
 

Author Comment

by:Juliamac
Comment Utility
I have a second question re resizing my header image. If I ask it as a fresh question did one of you guys want to answer as you've already looked at the site?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Go ahead and post it as a new question, then post the link here.
0
 

Author Comment

by:Juliamac
Comment Utility
I've found a workaround - thanks!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now