[blackkeys]

Hi

I have made a drop down select option thing with Contact Form 7 like you said, you can see it here:

http://www.red-cherry.net/where-to-buy/

But is there any way of actually putting links in? To link to a page within the site when someone selects the option?

Thanks

[blackkeys]

so in correspondence to my previous post above

I meant how to make something like this in WordPress:

http://www.youtube.com/watch?v=pwL-qSdRQr0

I know that’s done in PHP but I’ve looked for WordPress plugins and everything is just for the nav menu.

So if there are no plugins to do this is there any CSS which could do it?
Thanks
http://www.red-cherry.net

[blackkeys]

Ok no problem

Is there any kind of CSS for a drop down container (box kind of thing)
where someone can click and then look down the list to select a store?

Like on an electronics website where you can click for TV brands and select Sony, Toshiba, Samsung etc

Would like to make it the size of the data input area on Your Name part of the contact form here:

http://www.red-cherry.net/contact/

[blackkeys]

Hi

Is there any CSS code I can use to make the drop down sub menu on where to buy (on menu) four columns wide (like a mega menu or fly out menu)?

If you click on where to buy you will see a long list of stores that drops down. But the list is too long and doesn’t look good on a mobile device. Hence would like it to be four columns wide.

Also I want to deactivate the where to buy, so only the drop downs can be clicked on.

How can I do this?

http://www.red-cherry.net

[blackkeys]

Excellent, works perfectly. Thank you.

[blackkeys]

Hi

Please can you tell me what custom CSS to put into change the color of these pages on my site?:

http://sweetandsalty.biz/contact
http://sweetandsalty.biz/kontak

Because the contact form is not so clear with a white background. I prefer this form to others I tried and don’t want to change form. No option on form to change border so want to change page background on the pages to a light grey.

Thanks
wwww.sweetandsalty.biz

[blackkeys]

Ok so I have fixed the above issue. Strange, it was something to do with the page names.

I put in the following CSS and now the issue is resolved.

.page .entry-title {
display: none;
}

[blackkeys]

In regards to previous post. The problem is in firefox viewed on a desktop.

Thanks.
http://www.sweetandsalty.biz

[blackkeys]

Hi
The code you gave previously has resulted in a slight issue.

When you move through the menu pages in Indonesian, the language widget stays in line but the header area is jumping around all over the place.

In English the header is jumping about and the language widget doesn’t stay in line.

How can this be fixed?

Thanks.
http://www.sweetandsalty.biz

[blackkeys]

Excellent, thank you.

[blackkeys]

Hi
Okay what I meant is the bottom of the circle on the logo and the language widget need to be in line with each each other so:

Bottom of circle____________________Language Widget

With 5 px under them (before menu). So no huge white space. Please can you tell me the code for this?

Thanks

http://www.sweetandsalty.biz

[blackkeys]

Thank you so much for that. Its definitely sorted it a bit. But there is still some white space below the header logo. How can I remove that? Leaving only 5px like at the top.

I think it may be to do with the following lines in my code

@media screen and (max-width: 768px) {
.header-sidebar { padding-top: 0; }
}

http://www.sweetandsalty.biz

All my custom code is below:

#header-right { clear: both; }
#header-right { padding-top: 0; }

.lang-item {
display: inline;
}

p { line-height: 1.425; margin-bottom: 1em; }

#slider-nav { display: none; }

#site-logo, hgroup.with-logo { padding-top: 0; }
#hgroup-wrap { padding-top: 5px; }
#hgroup-wrap { padding-bottom: 0px; }
#hgroup-wrap { padding-left: 150px; }
#hgroup-wrap { padding-right: 10px; }

@media screen and (min-width: 961px) {
#hgroup-wrap { padding-top: 5px; }
#hgroup-wrap { padding-bottom: 0px; }
#hgroup-wrap { padding-left: 150px; }
#hgroup-wrap { padding-right: 10px; }
}

#hgroup-wrap a:hover img,
.featured-image a:hover img,
.entry-content a:hover img,
.comment-content a:hover img,
.widget a:hover img,
a:hover img.header-image,
.author-avatar a:hover img,
a:hover img.wp-post-image {
opacity: 1;
}

#hgroup-wrap .lang-item img { display: inline; }

@media screen and (max-width: 768px) {
.header-sidebar { padding-top: 0; }
}

[blackkeys]

Hi
Yes it works, thank you, but its created a huge white space below the header. I don’t want that.

I’ve searched for hours on the forums and tried all the codes, its driving me crazy. Please help.

http://sweetandsalty.biz

Current CSS is as below:

#header-right { clear: both; }

.lang-item {
display: inline;
}

p { line-height: 1.425; margin-bottom: 1em; }

#slider-nav { display: none; }

#site-logo, hgroup.with-logo { padding-top: 0; }
#hgroup-wrap { padding-top: 5px; }
#hgroup-wrap { padding-bottom: 5px; }
#hgroup-wrap { padding-left: 170px; }
#hgroup-wrap { padding-right: 10px; }

@media screen and (min-width: 961px) {
#hgroup-wrap { padding-top: 5px; }
#hgroup-wrap { padding-bottom: 5px; }
#hgroup-wrap { padding-left: 170px; }
#hgroup-wrap { padding-right: 10px; }
}

#hgroup-wrap a:hover img,
.featured-image a:hover img,
.entry-content a:hover img,
.comment-content a:hover img,
.widget a:hover img,
a:hover img.header-image,
.author-avatar a:hover img,
a:hover img.wp-post-image {
opacity: 1;
}

#hgroup-wrap .lang-item img { display: inline; }

@media screen and (max-width: 768px) {
.header-sidebar { padding-top: 0; }
}

[blackkeys]

Hi

Yeah I just basically need to know what the css code is for the Polylang widget to sit at the bottom of the right header sidebar, just above the menu. If its in responsive mode or not, it just always needs to stay there.

Thank you.

[blackkeys]

oh yes just to give you more info, regarding my previous post. My custom CSS now looks like this:

.lang-item {
display: inline;
}

p { line-height: 1.425; margin-bottom: 1em; }

#slider-nav { display: none; }

#site-logo, hgroup.with-logo { padding-top: 0; }
#hgroup-wrap { padding-top: 10px; }
#hgroup-wrap { padding-bottom: 10px; }
#hgroup-wrap { padding-left: 170px; }
#hgroup-wrap { padding-right: 10px; }

@media screen and (min-width: 961px) {
#hgroup-wrap { padding-top: 10px; }
#hgroup-wrap { padding-bottom: 10px; }
#hgroup-wrap { padding-left: 170px; }
#hgroup-wrap { padding-right: 10px; }
}

#hgroup-wrap a:hover img,
.featured-image a:hover img,
.entry-content a:hover img,
.comment-content a:hover img,
.widget a:hover img,
a:hover img.header-image,
.author-avatar a:hover img,
a:hover img.wp-post-image {
opacity: 1;
}
#hgroup-wrap .lang-item img { display: inline; }

@media screen and (max-width: 768px) {
.header-sidebar { padding-top: 0; }
}

http://www.sweetandsalty.biz

Thanks

[blackkeys]

Hi

Thanks a lot for that. Much appreciated. But I need the right header sidebar widget to sit at the bottom on a desktop as well, not just in responsive mode.

What is the code for that?

Also is there any way that the header can keep padding-left: 170px; } when viewed in desktop mode but be say 30px in responsive?

It will look much better if it can shift left in responsive.

If that’s not possible I might just disable responsive mode as it looks okay without it enabled anyway. But I still require the widget to sit at the bottom, just above menu either way.

http://www.sweetandsalty.biz

Thanks

[blackkeys]

Excellent, that worked. Thanks a lot:)

The only thing with the header now is to get the widget to sit at the bottom. And to sort the huge white space issue out when viewed on a mobile phone in responsive mode.

What would be the code for this?

Thanks

http://www.sweetandsalty.biz

[blackkeys]

Sorry I meant I fixed the permalink issue, not post.

The only thing required to finish the site more or less is to fix the multi-language widget (Polylang) issue I have mentioned in the previous posts.

I just need to know what code will sort the alignment of the flags out as mentioned.

Also that the widget is in bottom right of header area and doesn’t all mess up in responsive.

I think it should just be a few lines of css in the Appearance => Theme Options => Custom CSS” box to sort this widget issue out but I don’t know what that code is…

http://www.sweetandsalty.biz

Thank you.

[blackkeys]

I’ve fixed the post problem. I don’t need any help with that. Please can you tell me about this widget issue? Need to move its location as u can see in my previous post.

The alignment of flags and text should also be:

FLAG – English
FLAG – Indonesian

Also in responsive mode there shouldn’t be the huge white gap in header when viewed on a mobile device.

http://www.sweetandsalty.biz

[blackkeys]

I don’t understand what you mean with use default theme and check in. Basically why in the free theme can I just edit the permalink on a post and yet on the pro theme I cannot edit the permalink. The button to edit permalink on pro one isn’t there.
Free Theme: http://www.red-cherry.net and pro http://www.sweetandsalty.biz

And please can u tell me the answer to below? I copied ur forum post and pasted it below. Then I have pasted mine. I need to know how to bring that widget into the bottom right corner of the header area, and swo there isnt a huge white space in responsive mode. I am talking about the language widget on http://www.sweetandsalty.biz:

YOUR POST

@blackkeys: First you are not supposed to edit any core theme files such as style.css, index.php, functions.php and so on. As all these edits will be reverted back to original when you update the theme.

For CSS changes, you can either add your custom CSS in “Appearance => Theme Options => Custom CSS” box or you need to build child theme and add it in style.css of child theme.

Please send me your site URL and ask question in reference to your site. Then only I can check in your code.

MY POST
The site URL is http://www.sweetandsalty.biz

I played around with the style.css and managed to move the Polylang widget to a different location but couldn’t get it right. Basically it needs to sit in right sidebar but right at the bottom.

Plus the whole header area was still expanding way to large in responsive view on my mobile.

If the theme does not need to be updated to regularly we can do it from style.css if feasible.

Alternatively if you show me what I would need to do build a child theme thing or the custom css required for what I require. Thanks.

[Author]

Posts