9 years ago
10
Topic

Hi,

Am new to Joomla Seblod and CSS styling. I just enabled the Seblod Search on a Baseline – Youjoomla template.

How do I remove label “Title” and align both the input box and button on same line?

Using the default joomla seach module, I can achieve this out of the box from the module settings, however I couldn’t with the Seblod Search Module.

Thanks in advance for your time.

Get a Book for SEBLOD
9 years ago
2
Level 1

Nobody to help me out?

1283 Posts
Bucklash
9 years ago
1
Level 2

Hi yusuf

To remove the label replace it with the word 'clear' see this: learning-remove-label-use-keyword-clear

You might need to open the inspector so that you can take screenshots of the classes applied and their values to get help with amending the styling

Bucklash

9 years ago
0
Level 3

OK. Thanks, I will try your suggestions. 

9 years ago
2
Level 1

Hi Bucklas,

Following the guide you gave above, I was able to remove label “Title”.

The second milestone (yet to be achieved) is for me to align the search box and the search button on the same line which I haven’t achieved yet.

I use the firebug inspector to access elements CSS classes as below, but I don’t know where to locate this file containing these classes talk more of editing it. Kindly throw more light on that?

Search box

<input type="text" maxlength="255" size="32" value="" name="art_title" id="art_title">

Search button
<button onclick="JCck.Core.submit('save');return false;" name="button_search" id="button_search" type="button"><span></span>
Search</button>

Thanks for your time in advance.

9 years ago
0
Level 2

Hi,

Thanks to read manuals from Designer part. See links below.

It's CSS/HTML question here more than a SEBLOD question. Maybe a designer of the community will answer you.

Thanks.

1283 Posts
Bucklash
9 years ago
0
Level 2

Hi Yusuf

Without a screenshot it is hard to tell what css styling is affecting the buttons, so it is difficult to say which css you should add or change.

I have had a quick look at YouJoomla which is where you go the template Baseline. They have a custom.css file where you add code. I do not think you can create a custom.less file, though I am not a member so have no access to such extra info... You could  add css to style classes that relate to your template ie .inputbox is a class used by your template for the input on the search page of the YouJoomla Baseline demo site... I might consider creating a Seblod position and/or variation override, muck around with typography etc and add classes like .inputbox there. 

I have added an image, adding something like this to your forum post could help someone answer you more specifically. Unfortunately though, I haven't mastered the technique of adding screenshots that are readable, they get compressed a little too much on this forum, oh well.

Tutorials and forum posts hold the answer, plus check out css-tricks, Chris Coyier is a legend!!!

9 years ago
0
Level 1

@ Bucklash
You have said it all; the lasting solution will take highly skilled CSS to accomplish. This is beyond my capabilities at the moment.

However, I found work around. Instead of using the search module, I created my search elements using the List & Search type and with the aid of template positioning the elements where aligned as intended.

Thank you all for the contributions

9 years ago
1
Level 1

@ Bucklash and Bes

I kindly need your attentions on my new forum post here below:

http://www.seblod.com/community/forums/lists-search-types/how-to-align-list-search-type-form-elements-to-the-center

http://www.seblod.com/community/forums/fields-plug-ins/search-across-multiple-content-types-with-search-generic-plugin

Thanks for your time.

9 years ago
0
Level 2

Look at this post it explains how to use the seb template to change the fields to horizontal.

1283 Posts
Bucklash
9 years ago
0
Level 1

Hi Yusuf

I can help with css.

I don't mind doing over facetime or skype.

To write down all the css is a bit of a pain, easier to tell you.

Hint:

Apply desired width of input's container div, removing width: auto;

apply box-sizing: border-box; to the input, and other elements as you see fit.

apply margin: 0 auto, as above.

override the css declaring width: 90% !important;

not necessarily in that order, but mucking around a bit with these css options should get you close

Get a VIP membership