Search Bar and Border Customization

  • Author
    Posts
  • #121553

    Hello,
    I absolutely love this theme, and I thank it’s creators from my heart!

    I want to customize some things there via CSS, if possible:

    1- The search bar length, because I feel like it is too small.
    2- The search bar placeholder text, because I want to write it in my language (Arabic).
    3- The text that appears after the search results come, because they are in English, (They say: “Search Results For” or “Nothing Found – Sorry, but nothing matched your search terms. Please try again with some different keywords.”) and I’d prefer to use Arabic for that.
    4- The search bar border color, when it is clicked or written on, because it is blue and does not suit my style.
    5- The borders that are around the Featured Posts and the Widgets, because I need to make them lighter in color to contrast the background color, which is dark.

    Thank you,
    Huda

    The blog I need help with is bilmufakkirah.com.

    #121717

    lelandf
    Theme Author

    Thanks so much for the kind words!

    1. Try this Custom CSS:

    body .site-header .search-field { max-width: 182px; }

    Original value is 82px, so increase or decrease the number as you see fit.

    2, 3. Translations for Arabic need to be handled here: https://translate.wordpress.com/projects/wpcom/themes/bari/ar/default/

    This way, everyone using the Bari theme in Arabic can utilize the same translations. Right now it’s 58% translated, but it needs to be 85% for any approved translated strings to appear.

    If you’re interested in translating, you can learn more about that here: https://translate.wordpress.com/how-theme-translations-work/

    4. Try this Custom CSS:

    .search-field { outline-color: white; }

    5. Try this Custom CSS:

    input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=range], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], textarea, .featured, .featured .hentry:first-child:before, .featured .hentry:last-child:before, .featured .hentry:first-child:before, .featured .hentry:last-child:before, .featured .hentry:first-child:last-child .entry-header:before, .widget { border-color: white !important; }

    #121738

    Thank you so much for your help! I really appreciate it!
    I put the codes you gave me, and they worked wonderfully!

    There is something else, though:

    I set the posts that appear on the blog page to 25, because I want more of them to show, but that caused a long empty space to appear below the featured posts. I was wondering: Is there anyway I can put something there?
    Can I make the other posts that I have set to appear come beneath the featured posts as well ?

    Thanks again for your help!

    #121745

    lelandf
    Theme Author

    Good to hear that code helped!

    The new issue you described is a bit more tricky. Since the homepage is broken up into two columns, the non-featured posts couldn’t “spill over” into the other column. Hope that makes sense.

    Is there anyway I can put something there?

    Possibly. Do you have any ideas of what else to put there?

    #121748

    Thank you. I had a feeling that they were seperate columns, and couldn’t be mixed.

    But, if I can put something underneath the Featured Posts, that would fill the blank space.

    I have many ideas for that, and if any of them is possible, I would be happy with it:

    – Put some widgets.
    – Put some pictures of my choosing.
    – A space to give an introduction for the blog.
    – Another heading for “featured pages” (not posts).
    – Website/ blog announcements.
    – Featured products that I want to sell.
    – Advertisement photo banners.
    – Or maybe expand the number of featured posts.

    Thank you very much for your time and help.
    I really appreciate it.

    #121789

    lelandf
    Theme Author

    Thanks so much for the feedback.

    We can technically add a limited amount of certain types of content through Custom CSS, but it’ll be hacky and difficult to manage.

    .featured-wrap:after {
    	background-image: url('http://placehold.it/655x2500');
    	background-size: cover;
    	width: 100%;
    	height: 0;
    	padding-top: 381.679389313%;
    	content: "";
    	display: block;
    	margin-top: 50px;
    }

    Try out this code in Customizer (but don’t publish) as a demonstration. Or if you’re comfortable enough, swap out the value in background-image with an actual 655×2500 image URL in your media library.

    I’m thinking the most straightforward option here is to create an option in the theme to allow for more featured posts.

    There is already a similar option to adjust how many recent posts display on single posts (it looks like you’ve already set that to zero).

    It will take some time to develop this new feature, assuming it can be done in a thoughtful way that can be rolled out to all sites using the Bari theme, so I don’t want to make any promises at this point.

    Some of the other ideas you describe (“featured products that I want to sell” is a good example) give me the sense that you may quickly “outgrow” the limitations of the WordPress.com Premium plan and may need to upgrade to the Business plan that allows for uploaded plugins like WooCommerce, and code-level (beyond CSS) customization of themes.

    Anyway, for now, let me get back to you about an option to display more than two featured posts.

    #121809

    Thank you very much for all your help!
    The code that you gave me was amazing, I tried it and I really love it!
    It can be used for many things, like creating announcements and featuring small photos inside the image! I am already thinking of so many things to put there!

    Also, If you found a way to display more than two featured posts, I would love that as well. Thank you.

    I am so sorry for bothering you so much, but there is something else that I have just noticed right now:
    When I click on the menu button, the border around it is blue as well. I need to change it to match the search bar.

    As for upgrading to the Business plan; yes, it is my intention to do that someday, but I might need a long time before I can actually afford it, unless I make a lot of money from the e-book that I am still creating!
    In any case, I might stick with the Bari theme, because I love it, and it suits my style, unless you made something better for the Business plan?

    Thanks again!

    #121811

    lelandf
    Theme Author

    I am so sorry for bothering you so much, but there is something else that I have just noticed right now:

    No worries! I’m here to help.

    Also, If you found a way to display more than two featured posts, I would love that as well. Thank you.

    Okay, I’ll keep you updated on that.

    When I click on the menu button, the border around it is blue as well. I need to change it to match the search bar.

    Try this Custom CSS:

    .menu-toggle { outline-color: white; }

    In any case, I might stick with the Bari theme, because I love it, and it suits my style, unless you made something better for the Business plan?

    Most of my paid themes are already available to you on the Premium plan. I was thinking more about customizing theme code besides CSS, adding ecommerce features (through WooCommerce, for example). You could still use the Bari theme.

    Best of luck!

    #121812

    Adding eCommerce features would be wonderful when I upgrade to the Business plan!

    Thank you so much for everything!

    May Allah bless you.

The topic ‘Search Bar and Border Customization’ is closed to new replies.