Return to previous page

Custom Sidebar - by panda - on WordPress WooCommerce support

This topic has 12 replies, 3 voices, and was last updated 10 years, 8 months ago ago by Robert Hall

panda

Participant

April 7, 2015 at 16:15

Dear Support,

we have a wish to customize our sidebar.

Follow the links to see what we have in mind.

We have fixed the layout, but need help with the rest.

I dont know if this is anything you can do with simple coding?

Your swift reply is very welcome.

Thank you for a super theme!

Oh, and the header image keeps popping left when it should be centered(!)

Please, contact administrator
for this information.

#55414 Copied Theme version: Legenda WooCommerce version: 4.1.1

11 Answers

Brian Johnson

Member

April 7, 2015 at 16:39

Hello.

Please tell us what is the font-family you want to use for the sidebar?

With best regards
Brian Johnson

#55423 Copied

panda

Participant

April 7, 2015 at 17:59

Was hoping to use Helvetica Neue Std Lt.

‘BOLD’ font for ‘CATEGORIES’ and ‘REGULAR’ font for ‘SEARCH’ ‘LOGIN’ ‘INFO’ & ‘NEWSLETTER’

But then I couldnt find it in google fonts 🙁

What about Franklin Gothic Medium ?

Cheers

#55439 Copied Theme version: Legenda WooCommerce version: 4.1.1
Brian Johnson

Member

April 8, 2015 at 08:46
You may replace font-family with your own which you are able to upload on your site via FTP. Please add this code into the custom.css:

@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400; src: local('Inconsolata'), url(http://fonts.gstatic.com/s/inconsolata/v10/BjAYBlHtW3CJxDcjzrnZCI4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } .sidebar-left{ font-family: 'Inconsolata'!important;} .widget-title{width:100%;padding-bottom:0px!important;padding-left:10px!important;padding-top:0px!important;background:black!important;color:white!important;} .sidebar-widget h4,.sidebar-widget, .sidebar-widget ul{list-style:none!important;margin:0!important;} .widget_categories a, .sidebar-widget ul, .sidebar-widget li{padding:0;font-weight:bold;text-transform:uppercase;font-size:18px;line-height:19px;} .widget_categories a:before{display:none!important;} .widget_categories li a{padding-left:px;width:100%!important;} .widget_categories li {margin:0;padding:0;} .sidebar-widget #searchform input[type="text"] {width:140px;height:20px;margin:5px 0px 10px 0px;border:1px solid black; } #searchform .button {position:absolute;margin-left:-20px;width:19px;height:19px;padding:0;margin-top:5px;border:none;color:white;} #searchform .button::before{font-family:'FontAwesome';content:"\f002"!important;color:black!important;}

Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

With best reagrds
Brian Johnson
#55506 Copied
panda

Participant

April 8, 2015 at 13:44

Fantastic! Thanks a million!

Is it possible to have this sidebar on all pages?

I may have more questions looming in the very near future 🙂

Thanks again

#55633 Copied Theme version: Legenda WooCommerce version: 4.1.1

panda

Participant

April 8, 2015 at 13:47

Oh, I forgot –

centre header image code?

Very much appreciated!

You rock 🙂

#55634 Copied
Robert Hall

Participant

April 8, 2015 at 14:08
Hello,

Please add this code in custom.css file.

@media (min-width: 1200px){ .header7 .logo{ float: right; }}

Regards,
Robert Hall.
#55640 Copied
panda

Participant

April 8, 2015 at 14:40

Thanks.

It worked all right, but I am not sure if the nav menu links is proper though?

Header image dont seem to align with them..

Also, see #55633

#55658 Copied

Brian Johnson

Member

April 8, 2015 at 14:51

Sure you can have this sidebar. You may choose its position on each page and add every element of it in appearance->widgets->(drag and drop operation for “search” , “categories”, etc. widgets which were styled in css)->to main sidebar/single product page sidebar.

With best reagrds
Brian Johnson

#55661 Copied
Brian Johnson

Member

April 8, 2015 at 15:14
Please try also this code:

.header7 .shopping-cart-widget{position:absolute;right:0px!important;top:34px;} .header7 .logo {display:block!important; margin-left:auto !important;margin-right:auto !important;left:auto!important;right:auto!important;float:none!important;text-align:center!important; } .header7 .logo {display:block!important; margin-left:auto !important;margin-right:auto !important;left:auto!important;right:auto!important;float:none!important;text-align:center!important; }

With best regards
Brian Johnson
#55668 Copied
panda

Participant

April 8, 2015 at 16:02

Cant thank you enough for this!

Cheers

#55687 Copied

Robert Hall

Participant

April 8, 2015 at 16:12

Hello,

You’re welcome!
If you have any questions don’t hesitate to contact us.

Regards,
Robert Hall.

#55691 Copied
Viewing 12 results - 1 through 12 (of 12 total)