Announcement

Collapse
No announcement yet.

Botanicbliss.com New website design issues

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

  • Botanicbliss.com New website design issues

    I am trying to customize this website and I am having some issues with .css and home.html and the frame.

    I started with the Electronics-html5 free template. www.botanicbliss.com

    If anyone can help me tweak this template and get it to how I want it I would be very appreciative. I would be more then happy to offer a donation or pay for any professional help. I have tried to work with the support team at 3Dcart and they don't seem to have the full knowledge necessary to customize the store. Or they just want me to pay huge $$.

    The first issue I am trying to solve is with the header / logo graphic. Above the category menu.

    Here is mockup sample of what I am trying to achieve.

    mockup.jpg

    Here is how I am trying to do the header / logo graphic.

    I am not sure about the best method for making this happen. I want it to appear as it does in the mockup.jpg below. I am using the Settings > Design > Header Footer > and I am inserting a transparent .png file for the logo.

    http://www.botanicbliss.com/assets/images/BotanicSquare Logo2.png

    And I have set a background image in the .CSS for the #maincontainer style but its not working correctly either.
    (line 733 in default modified.css)

    #mainContainer .wrapper {
    max-width: 1200px;
    background-image: url("http://botanicbliss.com/assets/images/botanicbliss-headlogo3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 60px;


    So the logo is floating over the background image.

    The problems I am having is that the background image seems to repeat and glitch out if I do not have it set to "fixed" attachment. When its set to fixed it won't scroll with the rest of the website.

    When I set it to scroll the image repeats verticly even though its set to no-repeat.

    Why?

    Also as soon as I insert the Logo image using the method described above the main category menu text goes to the center of the menu bar. When I delete the logo, the menu text goes back to being left aligned.

    I need it to stay left aligned when I add the logo... Why is this happening?

    I am looking for a 3Dcart pro to help me... I am happy to share $$$

    G

    Attached Files

  • #2
    I am also having some issues with basic text color.

    There is several spots on the website were I have not been able to change the text color using the .css

    For example:
    http://botanicbliss.com/Wild-Hip-Body-_c_8.html There is text under the category name that says "Products (Total Items: 2) " I can't read it its a dark gray. When I use Firebug to find that css it says its in Layout.css but I have tried to add color options in the css for that line. It does not work.

    Also on the actual product pages:

    http://botanicbliss.com/Wild-Hip-Body-Lotion_p_17.html I can't read the in stock message. The Part number information, The product details, product options and option text.

    Were is the css that is making all this text the dark grey?

    Comment


    • #3
      1st issue:

      Completely change this rule:


      #logo {
      float: left;
      margin-top: 1%;
      }

      -to-

      #logo {
      left: 0;
      position: absolute;
      top: 10px;
      }

      2nd issue:

      Remove all of the background properties from this rule:


      #mainContainer .wrapper {
      background-attachment: fixed; <-- REMOVE ALL
      background-image: url("http://botanicbliss.com/assets/images/botanicbliss-headlogo3.jpg"); <-- REMOVE ALL
      background-position: 50% 60px; <-- REMOVE ALL
      background-repeat: no-repeat; <-- REMOVE ALL

      max-width: 1200px;
      }

      -Add this rule-

      header .wrapper {
      background: url("http://botanicbliss.com/assets/images/botanicbliss-headlogo3.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      }

      3rd Issue:

      Font Color rules to add via your examples; (ADD TO YOUR PRIMARY CSS FILE)


      There is text under the category name that says "Products (Total Items: 2)
      #itemsBlock .products-header, #itemsBlock .products-header span {
      color: #fff;
      }

      I can't read the in stock message. The Part number information, The product details, product options and option text.
      This is more of an overpowered rule to take care of majority of the text at once.

      #listing0 div, #listing0 .breadcrumbs a {
      color: #fff;
      }

      That should get you moving in the right direction

      Thanks,
      Shaun
      TheCartDesigner.com
      Not 3dcart Owned or Operated
      100% Independent 3dcart Expert


      Follow Us on Twitter

      Comment


      • #4
        Shaun you are my hero. Bro I should have just contacted you in the first place but you changed your website!! glad I found you again. This is Geoff from Mushbox.com. Please send me your new working email I want to keep in touch.

        Comment


        • #5
          Your comments helped perfectly. Thank you again.

          Now I just need help customizing that home page to get it looking like my mockup.

          Comment


          • #6
            Oh and the main category menu text.

            As soon as I added the logo the category buttons shift alignment to the center of the menu bar.

            When I remove the logo they go back to being left aligned.

            I need them to stay left aligned... What is up with that? It seems like they are shifting out to the right the same length as the logo graphic. For some reason that logo.png is pushing the category buttons out to the center.

            It doesn't even look that bad I can live with them in the center but I don't understand why its happening and that drives me crazy.

            Comment


            • #7
              1st issue:

              Completely change this rule:


              #logo {
              float: left;
              margin-top: 1%;
              }

              -to-

              #logo {
              left: 0;
              position: absolute;
              top: 10px;
              }
              Hey Geoff. The logo issue is in the first response. I was wondering what happened to ya...lol
              TheCartDesigner.com
              Not 3dcart Owned or Operated
              100% Independent 3dcart Expert


              Follow Us on Twitter

              Comment


              • #8
                Thanks Shaun.

                Comment


                • #9
                  Originally posted by thecartdesigner View Post

                  Hey Geoff. The logo issue is in the first response. I was wondering what happened to ya...lol
                  Hey I sent you some funds via PayPal and sent a message using your website.. Please respond I need your skills.

                  Comment


                  • #10
                    Hey Geoff, I had already responded to your crm... They seem to get choked up in the system and delayed lately. I resent it just in case
                    TheCartDesigner.com
                    Not 3dcart Owned or Operated
                    100% Independent 3dcart Expert


                    Follow Us on Twitter

                    Comment

                    Working...
                    X