WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Canvas theme ignoring specific custom CSS (11 posts)

  1. mrflib
    Member
    Posted 1 year ago #

    Hi all

    I've scoured the internet looking for solutions and have tried those roughly relevant with no luck.

    Website: http://www.coojewellers.com

    The search bar, which has happily picked up some of the custom CSS, has completely ignored the main .searchform styling (basically ignored the positioning and adding default border from styles.css). My customer CSS is as follows:

    .searchform {
      width: 99%;
      margin-top: 8px;
      margin-right: 10px;
      position: absolute;
      left: 810px;
      border-color: #000;
      border-width: 0px;
      border-style: solid;
      border-radius: 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
    }
    .searchform input.s {
        background: url(http://www.coojewellers.com/img/search-white.png) no-repeat 5px 2px #c43d27;
        border: 0 none;
        font: bold 11px Open Sans,Arial,Helvetica,Sans-serif;
        color: #d7d7d7;
        width:80px;
        padding: 2px 5px 2px 25px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -webkit-transition: all 0.7s ease 0s;
        -moz-transition: all 0.7s ease 0s;
        -o-transition: all 0.7s ease 0s;
        transition: all 0.7s ease 0s;
    }
    .searchform input.s:focus {
        background: url(http://www.coojewellers.com/img/search-dark.png) no-repeat 5px 2px #fcfcfc;
        color: #000000;
        width: 118px;
        outline:0px;
        border: 0 none;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
    .searchform input.submit {
      position: absolute;
      top: 3px;
      right: 10000px;
      border: none;
      margin: 0;
      padding: 0;
    }

    So far as I can tell it's only ignoring the top part, and I don't know why! I bet is something stupidly simple.

    Any help greatly appreciated.

    Pete

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can contact WooThemes for issues regarding their themes http://www.woothemes.com/support/

    Generally, CSS cannot have anything other than CSS. CSS cannot have HTML.

  3. jamesg40
    Member
    Posted 1 year ago #

    Just as an experiment, try adding ( border:none; ) and ( margin-left:-810px;) to your main main .searchform styling and see what happens, if that does not work try one more experiment by adding ( !important ) to the end of those like so ( border:none !important; ) and see if this helps.

  4. mrflib
    Member
    Posted 1 year ago #

    Thanks guys.

    James - CSS updated no change :/

    .searchform {
      width: 99%;
      margin-top: 8px;
      margin-right: 10px;
      margin-left: -810px;
      position: absolute;
      left: 810px;
      border-color: #000;
      border-width: 0px;
      border-style: solid;
      border-radius: 0px;
      border: none !important;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
    }
  5. jamesg40
    Member
    Posted 1 year ago #

    Well, looking at the page - if you are only trying to get rid of the white-ish colored border then you should be able to change line 1074 of your style.css to this

    .searchform {
      margin-top: 0;
      position: relative;
      width: 99%;
      border:none !important;
      border-radius: 3px 3px 3px 3px;
    
    }

    If your still getting the border then you either have to clean out your browser cache and refresh or it will be coming from another source. This worked for me in FF so give it a try and just see what happens. be sure to copy the original style and paste it somewhere safe..

  6. mrflib
    Member
    Posted 1 year ago #

    Thanks James,

    I can confirm this does work but was under the impression it is a cardinal sin to edit the main theme css and not a child theme?

    Cheers

  7. jamesg40
    Member
    Posted 1 year ago #

    lol, its not a cardinal sin at all. They all say that because when a theme author makes changes and puts out a new version of the theme, when you install the new one, some things could be over written. It does not hurt anything otherwise. Quite simply, if I ever use anyone else's themes for anything (which is never since I learned to build my own about 5 years ago), I normally end up re-writing a lot of it anyways simply because I only wanted the base design or layout or something like this. I dont worry about the theme updates either simply because I normally support my own work, lol :)

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I dont worry about the theme updates either simply because I normally support my own work, lol :)

    Yes, but not all users have that level of experience or know-how.

    @mrflib - if you change theme files, you will lose those changes when the theme is updated - so it is strongly recommended that you do not edit theme files directly - but rather use a child theme or custom CSS option or plug-in. It's always very unfortunate when someone comes here and says "oh my gosh, I didn't use a child theme and now I've lost months of work"...even if they have a back-up, it's still a lot of work to repair or remake the changes.

  9. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    remove that */ from here in custom.css:

    #menu-item-1945  a{
    	margin-left: 0px;
        margin-top: -6px;
    }*/

    this seems somehow to be stopping the execution of your .searchform { } styles.

  10. jamesg40
    Member
    Posted 1 year ago #

    yeah, dont want anything extra in your custom styles.

  11. mrflib
    Member
    Posted 1 year ago #

    alchymyth - thank you that was it. I knew it would be something stupid. When you look at something for so long you sometimes miss the obvious...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.