Jump to content
thirty bees forum
  • 1

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


CaitlynMSL

Question

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? 0_1502449173776_upload-b78d5be6-f994-4e85-9387-42362491e7ba

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

@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.

Link to comment
Share on other sites

  • 0

@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.

Link to comment
Share on other sites

  • 0
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;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...