?
Solved

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

Posted on 2014-03-01
21
Medium Priority
?
313 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 7
  • 2
  • +1
21 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39897373
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
ID: 39897414
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 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39897474
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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 

Author Comment

by:Juliamac
ID: 39897484
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 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 750 total points
ID: 39897545
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 111

Accepted Solution

by:
Ray Paseur earned 750 total points
ID: 39897726
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
ID: 39897835
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 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39897964
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
ID: 39898122
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
ID: 39898383
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
 
LVL 53

Expert Comment

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

Author Comment

by:Juliamac
ID: 39898633
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
ID: 39911941
Thanks guys - looking into child themes using underscore as a base.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39912283
>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
ID: 39912372
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 111

Expert Comment

by:Ray Paseur
ID: 39912540
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 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39912599
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
ID: 39912905
Excellent - thanks again for all your advice!
0
 

Author Comment

by:Juliamac
ID: 39936444
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
ID: 39936880
Go ahead and post it as a new question, then post the link here.
0
 

Author Comment

by:Juliamac
ID: 39936884
I've found a workaround - thanks!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Businesses who process credit card payments have to adhere to PCI Compliance standards. Here’s why that’s important.
This article was initially published on Monitis Blog, you can read it here . When it comes to deciding which approach to website performance monitoring is best for your business, unfortunately, like so many options in life . . . it depends. In th…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.
Suggested Courses

719 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