Canvas theme ignoring specific custom CSS

Resolved

(@mrflib)

Hi all

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

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

Viewing 10 replies - 1 through 10 (of 10 total)

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 3 months 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.

James G
(@jamesg40)

11 years, 3 months 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.
Thread Starter mrflib
(@mrflib)

11 years, 3 months 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;
}
```
James G
(@jamesg40)

11 years, 3 months 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..
Thread Starter mrflib
(@mrflib)

11 years, 3 months 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

James G
(@jamesg40)

11 years, 3 months 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 🙂

WPyogi
(@wpyogi)

11 years, 3 months 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.
Michael
(@alchymyth)

11 years, 3 months 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.
James G
(@jamesg40)

11 years, 3 months ago

yeah, dont want anything extra in your custom styles.

Thread Starter mrflib
(@mrflib)

11 years, 3 months 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…