WeStandWithUkraine

27 Posts
Yusuf
7 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
27 Posts
Yusuf
7 years ago
2
Level 1

Nobody to help me out?

1279 Posts
Bucklash
7 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

27 Posts
Yusuf
7 years ago
0
Level 3

OK. Thanks, I will try your suggestions. 

27 Posts
Yusuf
7 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.

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

1279 Posts
Bucklash
7 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!!!

27 Posts
Yusuf
7 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

27 Posts
Yusuf
7 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.

33 Posts
rmacias
7 years ago
0
Level 2

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

1279 Posts
Bucklash
7 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