1. jwm
  2. Commercial Templates
  3. Friday, 22 February 2013
  4.  Subscribe via email
SEARCH BOX WITH SOCIAL MEDIA ICONS + VARIOUS DANISH CHARACTER CHALLENGES

Hi Ciarán

I purchased the J51_Oxygen template a few days ago, but can’t seem to work out hów to move the search module box on the same line as the social media icons, where the search box is in a fixed position, whereas the social media icons push out from the right to the left, all depending on which icon I choose to activate from the template in template manager. (Picture 2, desired status)

I use the entire hornnav for 8 different pop-down menus, hence there is no room for the search box there. (Picture 1, actual status).

I have peeked through the entire J51 forum re. oxygen template, and did read all of the below mentioned threads, but without any luck.

We have only 66 lines in index.php. So instead of making changes to index.php, we changed header.php as suggested in one of the threads.

After <div id ="header" class="block_holder"> (Line 1) in header.php we added
<div id="topsearch">
<jdoc:include type="modules" name="topsearch" />
</div>

Then in template.css we added:
#header {
position: relative;
}

#topsearch {
position: absolute;
height:50px;
width:300px;
top:25px;
left:660px;  we changed this to right:200px;
margin:0;
padding:0;
z-index:99999;
}

#header .search .inputbox {
background:#fff !important;
}

This did not work.

Then I found a post about simply adding some code to “custom css” in the template manager:
#search {
top:150px;
left:900px;
}

(This one is relating to the standard search box, rather than the newly created topsearch box?).

We altered the pixelsettings, so that it’d fit our needs.

To place it close to the top, we used (Picture 3, achieved status)
#search {
top:10px;
left:730px;
}

And to position it where we want it to be, we used (Picture 4, achieved status)
#search {
top:98px;
left:730px;
}

This helped a bit, box is in the right position, though this means that the search box is “absolute”, hence it lies on top of the social media icons, which is not my intention. Perhaps it has to do with the position where the social media icons are being inserted from…? Could one instruct the social media icons to start inserting themselves from right to left from another position, to make room for the search box first? And if this is possible, in which file and where to make the changes? (header.php, what to add?). (Picture 5).

SECOND QUESTION:
Template mod-search? I need to change the word “Search…” to “Søg…”. Where to do this? (I.e. picture2).

THIRD QUESTION: is related to the slideshow included in the template, the Autson slideshow. Perhaps the question is not for J51, but I’ll give it a go anyway.
In module manager, the slideshow has a pop-down menu to select a number of fonts picture 5). No matter which one I choose however, it makes no difference. It stays the same font, with all CAPITALS. And the selected font does not support special danish characters like å Å, æ Æ and ø Ø… Picture 7 will illustrate what happens. Does any of the css files “overrule” whatever font is chosen in the slideshow module manager. If yes, where to find this file and what to change, so that I can write “TRAFIKTÆLLINGER” as I am supposed to do (instead of using AE as separate letters right now).

FOURTH QUESTION… I changed the word HOME to HJEM for the menu. But the breadcrumb trail still says HOME in English. Where to change this?

Found inspiration in following threads, but still no luck…
http://www.joomla51.com/forum/support/free-templates-extensions/topsearch-module-position#2296
http://www.joomla51.com/forum/support/free-templates/oxygen-new-module-position#54
http://www.joomla51.com/forum/support/free-templates/oxygen-new-module-position
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to your site so we can examine these issues further? If you do not wish to make it public please email to info@joomla51.com

Thank you

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Carián, thanks for your response.
I've sent you an e-mail.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Hanneke

Thank you... the URL worked perfect.

1. To relocate your search module add the following to the Custom CSS field of your templates parameters...

[code type=css]#search {top: 10px;}[/code]
Where 10px is the distance of your search field from the top of your page.

2. For the slideshow text try also adding the following..

[code type=css]#showcase .label_skitter h5, #showcase.label_skitter h5 a {font-family: Arial !important;}[/code]
Where Arial is your title font.

3/4. Have you tried adding the Danish language pack to your Joomla installation? Setting your default language to Danish should change all Joomla elements to Danish.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Carián,
Thanks for looking. But adding the 10px height in the custom css code will place the search box 10 px from the top of the document, this is not what I want... (I already did that myself in image 3).

I want it to appear on the right side of the social media icons, which are loaded at a relative distance (from what? the right side, the left side?), inserted from the right to the left, depending on which ones you tick off in the template-manager.

So instead of those social media icons to be inserted relatively from point xxx in whatever file that controls thát movement, I want to position the search box either relatively in the same "row" of social media icons, or place the search box absolutely in that spot, but then change the point from which the social media icons "fly in", to a position which is located on the left side of the search box, so the search box does not cover the media icons...

Any thoughts?
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Ah ok... my apologies.

Try adding something like the following instead..

[code type=css]#search {top: 103px;}
#socialmedia {left: 455px;}[/code]
The social icons are positioned relative the top left of the header area within a div. Within that div the icons are then floated to the right.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi ya!

Thank you for your patience... We still can't get it to work, however, the nice search box HAS moved now (it's the nice grey box)... but now it's at the top of the logo. It apparently doesn't make a difference if we say top 98px and left 730 px... it stays put...
At some point, all the social media icons moved up to the top as well.

Any other suggestions highly appreciated, but if you throw in the towel, it's totally understandable :-)
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
So, Ciarán did it again!

Whilst we were pulling hair off our heads, making things much more complicated than needed, trying to implement the code into template.css and what have you, Ciarán added this into the custom-css field of the template parameters under template manager... AND LE VOILÀ.

#search {top: 103px;}
#socialmedia {left: 455px;}

Blood pressure soon going back to normal thanks to the excellent support from Ciarán. THANK YOU! :laugh: :woohoo:
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
ps. Forgot the picture:
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
I asked if it were possible to move the search box a few pixels to the right, so it'd align with the menu. And le voilà:

"To align your search field try changing the following in your Custom CSS field in your templates parameters..
#search {top: 103px;}

to...
#search {left: auto; right: 17px; top: 103px;}


Another comment was, that if I were to turn on all social media icons (don't think I'd have the need for it, but just curious), the 2 first ones would not align properly. And Ciarán came up with a solution for that as well:

"If you do happen to use all your social media icons try adding the following to the Custom CSS..
#socialmedia {width: 270px;}"


Great support, again! Thanks!
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Hi!

We've been in touch previously with regard to purchased J51_oxygen template. It uses Autson slideshow.

I got a question from a colleague, if the order in which the images are shown, can be set to random. Couldn't find it in the setup (only the transition can be set to random, fade etc.).

Do you know, if the order in which the images are displayed can be set to random in some way, meaning it's not always the first image in the set-up which is displayed as number 1 on the front-end?

Also, when looking for information on the web on this slideshow, joomla extensions says that it's no longer downloadable, due to "UR-7, under investigation" (http://extensions.joomla.org/extensions/photos-a-images/images-slideshow/18277 - "An investigation of fraud, unethical practices or reviews of general directory guideline violations can cause this unpublish reason."

Anything to be worried about?

Best regards,
Hanneke
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
And another thing one of my colleagues can't live with... (I had noticed it before, but thought I'd let it go... but he won't...)

In Danish, we have special characters, i.e. an A with a circle on top Å.
This character is too big/high for the template it seems, as part of the character is "chopped off" at the top.

Is there any code I can insert to give it more "space" at the top.

See http://www.its-teknik.dk/ - there's 3 examples of the chopped of character on the homepage.

Best regards,
Hanneke
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Sorry to say there is no option available with this template to display the slides in a random sequence.

The slideshow was removed from the JED due to a hidden link back to the slideshow developer which we have removed.

To add a space above your h2 tags to accommodate Danish characters try adding the following to the Custom CSS field of your templates parameters...


[code type=css].items-row h2, .cols-2 h2, .row-0 h2 {padding-top:5px;}[/code]
  1. more than a month ago
  2. Commercial Templates
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
Hi ya, the custom css field parameters worked like a charm. As always, a thousand thanks (danish expression) for your support. Never let me down :-) Your support is just awesome!

As with regards to the autson slideshow, OK, we'll have to live with it. Do you know of any (commercial) slideshow which can do that trick though, it should be possible to include thát module instead of the free autson one?

Best regards,
Hanneke :)
  1. more than a month ago
  2. Commercial Templates
  3. # 13
Accepted Answer Pending Moderation
0
Votes
Undo
I cant say I do. You could try the Briask slideshow (https://dl.dropbox.com/u/69136519/mod_briaskslideshow.zip) however the module does not have an option to add image titles.

You shouldn't have any issue loading the slideshow of your choice in the showcase module position.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 14
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok