CSS / Styling in community-theme-default - where to start?

[CaitlynMSL]

I wish to make a few styling changes to the theme myself, but it seems that any editing I do doesn't apply. It's clear the issue lies with me and I'm looking in the wrong places, so I'd like some help with direction. For example, I'd like to give this search bar a curved border with border-radius: 4px; or something similar. I've tried editing css in theme/css/global.css, theme/modules/blocksearch/blocksearch.css, theme/css/modules/blocksearch/blocksearch.css and store/modules/blocksearch/blocksearch.css but it doesn't seem to work. Where should I be looking exactly?

[lesley]

the blocksearch.css should work, are you sure you are targeting the element correctly? You might try #search_query_top { } as the element.

[CaitlynMSL]

@lesley I've tried both blocksearch.css and tried targeting that element, but I still can't see any changes. The only change I can see is by deleting everything in theme/modules/blocksearch/blocksearch.css, it will move the search bar up slightly.

[lesley]

Are you clearing the cache on your site? Is there a server cache that might be affecting the changes?

[CaitlynMSL]

@lesley Ah, thank you! I hadn't thought about caching, and there was caching on the server. Sorry for the time waster.

[alwayspaws]

@CaitlynMSL Thank you so much for bringing up this topic. I use the Transformer theme, which I love, and only had the magnifying glass on my page. I finally decided to hunt down how to get the border around the search box. All I had to do was choose "no" for "simple style" in the QUICK SEARCH BLOCK MOD.

[Obi]

On 8/11/2017 at 6:00 AM, CaitlynMSL said:

I wish to make a few styling changes to the theme myself, but it seems that any editing I do doesn't apply. It's clear the issue lies with me and I'm looking in the wrong places, so I'd like some help with direction. For example, I'd like to give this search bar a curved border with border-radius: 4px; or something similar. I've tried editing css in theme/css/global.css, theme/modules/blocksearch/blocksearch.css, theme/css/modules/blocksearch/blocksearch.css and store/modules/blocksearch/blocksearch.css but it doesn't seem to work. Where should I be looking exactly? /assets/uploads/files/233/1502449172202upload-b78d5be6-f994-4e85-9387-42362491e7ba

I know this is a very old post, but there doesn't seem to be any resources I can find with regard to modify/styling the Thirty Bees Community Theme, so I'm answering here - mostly for the edification of those just beginning:

The following will let you style the search box:

/* customize the input box */
#search_query_top {
  border-radius:7px 0 0 7px;
}
/* customize the search button */
#searchbox .btn.btn-primary {
  background-color: #333;
  color: #ccc;
  border-color: #666;
  border-radius: 0 7px 7px 0;
}
#searchbox .btn.btn-primary:hover {
  /*background-color: #555;/* this line can be added if you want to change the color of the button during mouseover/hover */
  color: #fff;
  border-color: #999;
}