Announcement

Collapse
No announcement yet.

Product Features

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

  • Product Features

    I would like to have our product features mirror that to the way it's set up on amazon.com. I would like to see indented bullets next to each item so they don't blend into everything. Any thoughts on how this can be accomplished?

    ___________________
    Toymaster
    www.1upcollectibles.com
    www.facebook.com/1upCollectible

  • #2
    Are you adding the information you want to have bullet points in a section where you can add HTML in with your text? If so, you can use an unordered list.

    HTML Code:
    <ul>
      <li>First bullet point</li>
      <li>Second bullet point</li>
      <li>Third bullet point</li>
    </ul>  

    Comment


    • #3
      Perhaps I am misunderstanding, but the bullet points are also available in the WYSIWYG mode.
      http://www.pack-secure.com

      Packaging and Shipping Supply Specialists

      Comment


      • #4
        Toymaster My previous template used to have the bullets for product features automatically. My new responsive template does not have bullets anymore. When I looked at the code the unordered list is there and the <ul> <li> html are present so the bullets should be there. I am thinking the bullets get turned off somewhere in the CSS so they never show? I am not a coding expert so I would like to know how to turn them back on as well. I swapped awhile ago and have yet to figure it out. =)

        Dana

        Comment


        • #5
          You want it to look like the attached?

          I removed #listing0 .productFeaturesBlock .feat-name {display: inline-block;} and #listing0 .productFeaturesBlock ul {list-style: none; margin: 0; padding: 0;} in the css (using the chrome extension). I make no claims that those don't break something else in your site thought.

          Comment


          • #6
            Hi Toymaster! I didn't know you had moved here. Anyway, I believe what you want to accomplish needs to be accomplished by modifying your stylesheet. It appears that the bulleted info is styled to align left, probably due to the mobile rendering needs. If you can't figure out the style class, you can create a style in your stylesheet and "wrap" the list in a <div class="your-style-name">List</div>. The other areas to achieve the look you want involve the same logic of altering your stylesheet or creating a new style to override the current style. You might want to play with altering text and/or background colors. You should not use inline styling; just styles that are in your stylesheet by default or added by you to the stylesheet. As always, copy your current stylesheet to Notepad and SAVE it before editing.

            Comment


            • #7
              Actually I just changed my store language to code in a bullet point here
              https://www.islandjay.com/Hooked-on-...Ring-Toss-Game
              Look ok. Alignment off?

              On mobile view, it is out of whack.

              Comment


              • #8
                If you want to indent the default list formatting, try adding

                ul {margin-left:10px;}

                to your stylesheet in the area for styles used site wide

                Comment


                • #9
                  Toymaster

                  I know a few people have asked for this in the past and it is fairly simple to add, so hopefully this helps multiple viewers.

                  ADD BELOW RULES TO YOUR ACTIVE CSS FILE (typically default_modified.css)

                  #listing0 .productFeaturesBlock ul { list-style: outside none none; margin: 0 0 0 20px; padding: 0;}
                  #listing0 .productFeaturesBlock li { line-height: 15px; list-style: outside none disc; margin: 0 0 5px;}
                  #listing0 .productFeaturesBlock .feat-name { display: block;}

                  Thanks,
                  Shaun
                  Last edited by thecartdesigner; 11-20-2015, 12:45 PM. Reason: added further instruction for rule placement
                  TheCartDesigner.com
                  Not 3dcart Owned or Operated
                  100% Independent 3dcart Expert


                  Follow Us on Twitter

                  Comment


                  • #10
                    thecartdesigner Where in the style sheet are you putting that? I put it in with item description/details like so but haven't seen a difference.

                    /*item:: Controls the item description and item details text.*/
                    .item {
                    font-size: 12px;
                    color: #3e343c;
                    font-weight: 400;
                    }
                    #listing0 .productFeaturesBlock ul { list-style: outside none none; margin: 0 0 0 20px; padding: 0;}
                    #listing0 .productFeaturesBlock li { line-height: 15px; list-style: outside none disc; margin: 0 0 5px;}
                    #listing0 .productFeaturesBlock .feat-name { display: block;}

                    Comment


                    • #11
                      Your active css file. default_modified.css is typically your active css file. If you don't see the change you need to more than likely clear your store cache (under General Settings) and refresh the page.

                      Also make sure that you are using the correct section that was asked about and what the rules are for. Product Features are at the bottom of the Product Admin Information(main) Tab.
                      Last edited by thecartdesigner; 11-20-2015, 12:52 PM.
                      TheCartDesigner.com
                      Not 3dcart Owned or Operated
                      100% Independent 3dcart Expert


                      Follow Us on Twitter

                      Comment


                      • #12
                        Thank you for the advise thecartdesigner
                        ___________________
                        Toymaster
                        www.1upcollectibles.com
                        www.facebook.com/1upCollectible

                        Comment

                        Working...
                        X