How to change page title style, custom buttons and add search bar to the header?

(15 posts) (2 voices)

1. 

   OnurDemirsoy
   Member

   Hey. Firsf of all sorry because of my English.

   I really like your design but I need to change something. First of all I need to change Page title style. It looks like a big button now. I want to change it to H2 or H3 without a button. Maybe add a shadow with CSS later. Is there an easy way to do it?

   I also want to change the CSS of all buttons. How can I do it? I want to use my own CSS button designs (for example in the slider or in some pages).

   Lastly I need to add the search bar to the right part of the header, right part of the header menu. Or maybe upper part of the header menu. But the search bar should be at the header. Is it possible to change the looking of the search bar with CSS? I dont need to change its looking but just wonder.

   I couldnt find a solution for these. If there is an easy way, I d be happy. Have a great day.

   Posted 6 months ago #
2. 

   Elliott
   Support

   Hello OnurDemirsoy,

   1. You can customize the intro title by adding this line in Dashboard -> your theme -> General Settings -> Custom CSS,

   .intro_title { background: none !important; outline: none !important; border: none !important; box-shadow: none !important; }

   2. You can target the buttons like so,

   .fancy_button { }

   3. See here, http://mysitemyway.com/docs/index.php/Adding_stuff_to_the_header.

   Posted 6 months ago #
3. 

   OnurDemirsoy
   Member

   Thanks for your respond but this doesnt work for me. Let me explain.

   First of all I want to add a search bar and search bar is a widget. So I need to add a widget to the header. But it doesnt work me too because my header is dark but the search bar created for light surfaces. So is it possible to add widget to the header (well i can fit it to the correct location with CSS) and create a second search bar and use dark design for it. Well changing the png doesnt work for me because I want to use search bar in the header but the light search bar is everywhere else. For example 404 pages. I can solve this problem with 2 search bar designs, one for header and one for other parts of the page.

   I tried the CSS code for Title styles, and it is working. Thanks. I wish you ll find a solution to my search bar problem too..

   Have a great day.

   Posted 6 months ago #
4. 

   Elliott
   Support

   You can use our shortcode, [search], which basically calls the default Wordpress search widget. See here for how to use it in the header, http://mysitemyway.com/docs/index.php/Adding_stuff_to_the_header.

   Posted 6 months ago #
5. 

   OnurDemirsoy
   Member

   Thank you, I just did whatever you said and I added the search bar to the header. But I still have a problem. I have a dark image on my header, but the search bar is light. Well I can change its CSS and PNG files to make it darker but also other pages uses light search bar. I dont want to lose it too. Is there a way to create a new dark search bar to use it only on Header? I can duplicate PNG files and create dark design but I want to use both light and the dark versions together. But what should I do with CSS?

   Btw I didnt find a way to delete the black line on the intro part. Is it possible to delete it? I mean the divider line under the text.

   I sent you 2 screenshots, you ll understand what do i mean. Thanks again.

   

   Attachments

   1. ScreenShot027.jpg (41.5 KB, 1 downloads) 6 months old
   2. ScreenShot026.jpg (36.3 KB, 2 downloads) 6 months old

   Posted 6 months ago #
6. 

   OnurDemirsoy
   Member

   I found this in the style.css

   /* Search
   -------------------------------------------------------------- */
   #searchform div{background:url(images/searchbar.png) no-repeat left top;height:28px;margin-top:5px;overflow:hidden;width:288px;}
   #searchform #s{background:none;border:0;float:left;height:25px;margin:0;padding:4px 0 0 14px;width:232px;color:#666;}
   #searchform #s:focus{background:transparent url(images/searchbar.png) no-repeat left -30px;outline:none;}
   #searchform #searchsubmit{background:transparent url(images/searchbar.png) no-repeat right 0;border:0 none;cursor:pointer;float:left;text-indent:-99999px;height:30px;margin:0;padding:0;width:42px;border:0 none !important;box-shadow:none !important;}
   #searchform #searchsubmit:hover{background-position:right -30px;}

   I would like to create #searchform2 with my custom css codes and png files. (a dark one)
   Is there a way to use this new searchform only in Header?
   I wont delete #searchform, so it will still be used on the other parts of the site.

   Posted 6 months ago #
7. 

   Elliott
   Support

   You can target the one in the header like this,

   #header #searchform {  }
   #header #searchsubmit {  }

   Posted 6 months ago #
8. 

   OnurDemirsoy
   Member

   like this?
   #header #searchform2 { }
   #header #searchsubmit2 { }

   Posted 6 months ago #
9. 

   Elliott
   Support

   If you put a #header before the #searchsubmit ID then it will target only the search form in your header and leave the other forms alone so you can do this,

   #header #searchform {  }
   #header #searchsubmit {  }

   And style them however you need.

   Posted 6 months ago #
10. 

    OnurDemirsoy
    Member

    Thank you so much. They all worked correctly :) I ll send you a link after i ll finish my website..
    I asked one more thing, but i guess you forgot to explain it.

    I couldnt find a way to delete the black line on the intro part. Is it possible to delete it? I mean the divider line under the text.

    Posted 6 months ago #
11. 

    Elliott
    Support

    Sorry, I see it in your screenshot but it looks like some kind of customization. If possible send us a link to your site so we can take a closer look.

    Posted 6 months ago #
12. 

    OnurDemirsoy
    Member

    ok here is my site: http://www.animativedigital.com/

    Posted 6 months ago #
13. 

    Elliott
    Support

    Try this,

    #intro_inner h6 { background: none !important; }

    Posted 6 months ago #
14. 

    OnurDemirsoy
    Member

    thank you so much :)

    Posted 6 months ago #
15. 

    Elliott
    Support

    Your welcome, let us know if you have any other questions.

    Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.