Announcement

Collapse
No announcement yet.

How to change color/size product name?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to change color/size product name?

    This has to be easy, but I can't figure it out. New to 3d and not a coder. arrgh!

    I'm trying to change the color/size of the product name (and the description text) on the listing pages. According to the kb, I believe that it should be changed here:

    Code:
    /*item:: Controls the item description and item details text.*/ 
    .item {
            font-family: Verdana, sans-serif;
    	font-size: 12px;
    	color: #696969;
    }
    /*itemTitle:: Controls the name of the Product.*/ 
    .item-title {
    	font-size: 16px;
    	color: #8ab913;
    	font-weight: bold;
    }
    Using listing 2 which I believe is .03? Nothing is working and when I go to Firebug it's showing product name as 'page header' vs. itemTitle.

    Trying to replicate my current store as closely as possible, so want my product names and category page titles different colors vs. common page headers. How where/do I get this done? Should I be changing the info in multiple places?

    Thanks much for your help,
    Kelly

  • #2
    Can you give a URL to an example?

    Comment


    • #3
      (OP gave me a link via PM)


      I think the knowledge base is incorrect. Can you link to the KB article?

      Having a working knowledge of HTML and CSS will be incredibly helpful for customizing your 3DCart store. You are correct that the product name is controlled by the class "page_headers" by default. This is the same class that controls most other page titles on the site, apparently.

      I think you should dig in and modify the template page. Add your own class name to the title in the product template (listing_0.html). Add CSS rules to cover that class in the CSS file.

      Comment


      • #4
        Originally posted by cbsteven View Post
        I think the knowledge base is incorrect. Can you link to the KB article?
        Can't find the darn article right now to save my soul. Spent most of yesterday trying to track down the info.

        Doesn't really matter since even the website design 3.0 .pdf link in the admin doesn't appear to match instructions/fields on the admin style sheet editor.

        For instance...according to the design guide... page_headers not supposed to control all headers. You'll also see the 'item' fields for products on the style sheet editor in the admin. I called support yesterday and they said needed to be edited directly on the template. (the code pasted in first post) However, that obviously didn't work and that's not what controls the look.

        Originally posted by cbsteven View Post
        Having a working knowledge of HTML and CSS will be incredibly helpful for customizing your 3DCart store.
        Swear I wasn't trying to customize, just minor change to some text colors/font/size. But I give up. You are 100% right, so I'm contacting my designer pronto.

        Thank you for taking the time to look. Much appreciated!
        Kelly

        Comment


        • #5
          On a side note:

          /*itemTitle:: Controls the name of the Product.*/
          .item-title {
          font-size: 16px;
          color: #8ab913;
          font-weight: bold;
          }
          Just so you know... these will not show up on your admin css adjustment panel because a lot of them are not correct out of the box. Change it to this if you want to avoid the default_modified.css and use the css change panel in the admin panel:

          Code:
          /*item-title:: Controls the name of the Product.*/ 
          .item-title {
          	font-size: 16px;
          	color: #8ab913;
          	font-weight: bold;
          }
          Now, The easiest way to find how to do what you want is actually to create.

          If you know the css that you want to use for the product title on the listing page, simply add it. I assume that you have found it in the listing_#.html, so go to that and change the class="page-header" to class="product-title".

          Now go to your default_modified.css and scroll all the way to the bottom and add this:

          Code:
          .product-title {
          	font-size: 16px;
          	color: #8ab913;
          	font-weight: bold;
          }

          click save and go to your store settings and clear cache. Now if you look in firebug and you are looking at the correct listing_#.html for that product you will see product-title instaed of page_headers.

          Now you can change til your hearts content.

          Hope this helps
          TheCartDesigner.com
          Not 3dcart Owned or Operated
          100% Independent 3dcart Expert


          Follow Us on Twitter

          Comment

          Working...
          X