Side Bar Customization with Theme
-
Hi,
I currently have a side bar set up with the Twenty Fourteen Theme. I am hoping to customize this slightly – if you look at my site, the side bar looks similar to what I want (with the logo that says “Ann Ascherman”) but I set it up in a funky way. Currently, that logo is part of a header at the top of the page, rather than being an image centered on my side bar.
There is no mention of a sidebar in the css that is currently set up (because it is through the theme), is it possible to edit this so that I can modify the sidebar (add a logo image, modify the width, have more control over the menu text, etc.)? Do I first need to delete the sidebar from my theme customization and add it into the CSS?
The blog I need help with is: (visible only to logged in users)
-
Hi there, the sidebar at the left contains the menu at the top and then the a widget sidebar below that. You can change your menu to be a horizontal top menu by going to Appearance > Menus and selecting Top primary menu instead of Secondary menu in left sidebar if you choose.
The left sidebar will move down below the content on narrower screens on a responsive designed theme such as Twenty Fourteen, so it wouldn’t be a good place for your logo.
If you crop your current header image fairly tight, we could put it in the header area to the left above the sidebar using CSS. If you wish to try that, create the image and upload it to your media library and then post a link to it here and we can work out the code for you.
The left sidebar area, which includes the menu has a CSS id of #secondary. The menu is a child div inside of that and is under a CSS class of .secondary-navigation. The sidebar widget area below that is a child of #secondary with a class of .primary-sidebar.
-
Hmmm, I am a tad confused.
I definitely want the menu at the side (as is), NOT at the top. Why is it that the sidebar would move below the content? I see this on websites all the time?
I guess that is why I was wondering if it would be better for me to remove what I currently have set up and try to use CSS to design it from scratch (with a continuous side bar – always on the side)…does that make sense? Is that possible?
I am new to CSS but really trying to learn all that I can, so I am not afraid of a more challenging way of getting it to look like I would like :)
I made a little diagram of what I hope the home page will look like. I am not sure if you will be able to access it, but I think it is here:
https://annascherman.wordpress.com/template-example/?preview=true&preview_id=140&preview_nonce=63df1daab6 -
Hi, if I narrow my browser window on your site, the sidebar/menu section moves below the content: https://cldup.com/kgQn9QpJRB.mp4
-
On the Menu, what you can do is to de-select the “Secondary menu in left sidebar” at Appearance > Menus and then add a custom menu widget to the Primary Sidebar (left) and select your Menu from the dropdown. You can then place the menu anywhere you want within the sidebar.
You may consider adding your logo to an image widget at the top of the left sidebar and link it to your home page and put it above the Custom Menu Widget. The drawback here is that the logo and menu will move below the content on smaller screens.
Keeping a sidebar always on the side will severely limit room for content, and your content is always the most important. On an iphone, the effective resolution is 320px wide by 480px high. If you have a 160px wide sidebar on the phone, then you only have 160px of width for the content, and that would make for difficult reading and any images you would have in your content would be no wider than 160px.
Have you considered using a grid style of theme, such as Canard or Sidespied and using Portfolios? Canard doesn’t fully support Portfolios, but you can use the Portfolio Shortcode with it.
I think trying to accomplish the layout you envision with Twenty Fourteen would be very difficult, and adding to that would be trying to make it all work and flow on smaller devices such as tablets and phones.
-
I would certainly be open to a different theme.
With the grid style theme (such as Canard or Sidespied), would I still be able to follow your instructions for the sidebar? Is this an issue with all websites that have a side bar, or just because of the way it is set up with wordpress? It seems so odd to me that I would have so much trouble, when I see it so commonly.
With Portfolio Shortcode, would I be able to set up the graphic organization that I am looking for?
Basically, I am happy to do whatever I need to achieve what I am looking for in that template diagram…do you see a means of achieving it through CSS, or am I always going to have to sacrifice something?
Thanks again for your help! I know I have a lot of work ahead of me, but it helps to have someone point out the pit falls before I get to it.
-
In responsive themes, I’ve not seen any with sidebars were the sidebar does not move down below the content. This is done to keep your content front and center and make it easy for users to read. Content always takes precedence over sidebar content in responsive designs. You could go with a fixed width theme, which would show the full site all the time, but on small tablets and phones, everything would be very small and unreadable unless the visitor zoomed in. With more and more of the web viewing being done on tablets and phones, designers are making sure that the content is easy for them to read.
You can read more about the Portfolio Shortcode here. There are a number of options that you can set to control the look of the projects in the shortcode page, but I don’t know of any theme that would allow you to show the images in the layout that you showed in your example. A lot can be done with CSS, but to achieve the layout you are wanting would likely not be possible with CSS only, or if it was, it may be a monumental challenge.
It may be possible to use a full-width page template and then use HTML in that page and CSS to style things and accomplish that look. The challenge I see with that is doing it in a way that makes sure things flow and look good for smaller devices.
Another option would be to go with a self-hosted installation of the WordPress software on another web host such as Bluehost, SiteGround, or HostGator, and then if you do not have the php and CSS experience, you could get someone to build or modify a theme for you.
-
It seems like a full-width page template (and HTML) is probably what I am going for. Although I do understand your argument for responsive themes, I think that, for the purpose of my page, it really will be viewed mostly on a full size monitor. I am less concerned with the way it looks on smaller devices than I am with having the page look how I would like it to look (given the nature of my site).
Is there an easy way to determine full-width page templates vs responsive theme templates?
Also, when you say, “get someone to build or modify a theme for you,” do you essentially mean pay someone to build my site? What would be the benefit of using another web host (is it possible to use HTML on wordpress or only CSS?)
-
You can look at the fixed width themes we have here at WordPress.com by going to our Theme Showcase and then click on “Find Themes” and then click on Layout and select “Fixed Width”. Not all fixed width themes have full-width page templates, but you can narrow things down by also filtering by “Full Width Template under Features. Here would be a direct link to Fixed Width Themes with Full Width Templates.
In general you can do much more with a self-hosted site since you can modify the theme files to fit your needs, which you cannot do at WordPress.com. Self-hosted sites do require a greater level of experience to be able to do that.
You can add HTML to the content area on pages and posts, and I would suspect that what you are wanting to do could be done with some simple HTML in the content area of a full width page. There are some limitations on the HTML that can be used here, but what isn’t allowed probably isn’t needed for what you are wanting to do.
It is likely also going to require some CSS too to get things to look the way you want them.
-
hmm. Thank you for all of this information..it has been so helpful.
I just want to be sure I completely understand before I try to set this up using wordpress vs. a self-hosted site. When you say you can add HTML to “pages and posts,” where exactly can I do this? For example, if I go to my front page right now, I see the two images I have tried to set up in my gallery…in theory, it seems like I could set up the html to structure the gallery how I have imagined it?
Or, do you think that this is not going to be possible with wordpress alone and I will have better luck through a self-hosted site? Are there additional fees to use a self-hosted site?
-
Hi, the gallery feature is written into the Jetpack plugin, so that is something that cannot be overridden. I was thinking that you would put the HTML into the page content area, from within the Text tab to create the grid layout you want.
For a self-hosted site, you would need to get an account at a web host, typically $5 to $10 per month, and then install the WordPress software and a theme. There are a lot of fixed width free themes available, so there shouldn’t be any cost associated with that.
The layout you are wanting is doable with HTML and CSS on a fixed width theme with a full width page template (sometimes called no sidebar).
-
Ok, great. Thanks again. I am going to try to get this set up…I’m sure I’ll have more questions as I go!
-
-
Well…actually one more question.
I found a website where the sidebar exists on full size browser windows, and then disappears on smaller monitors (http://www.fnarchitecture.com/). I assume that is another level of customization-is it doable through wordpress?
-
Most responsive designed themes move the sidebar down below the content on narrower screens/windows. Some actually hide the sidebar entirely on smaller screens, but not too many do that. The sidebar on the responsive designed themes here can certainly be set not to display at all on smaller screens with some CSS, but my suggestion is to keep it and let it display below the content. That way it is there for visitors on smaller screens if they wish to view and use it.
You can review the responsive designed themes offered here at WordPress.com by filtering our Theme Showcase for Responsive Layouts.
-
Ah, interesting. In fact, the content on my home page is going to be the same as the side bar link – it will just be displayed graphically (a portfolio of architectural/design projects versus the project titles). Therefore, I think the option to hide the sidebar on smaller screens would be perfect for my purposes.
So, just to be clear, if I chose a non-responsive theme, could I still use CSS to turn off the sidebar on smaller screens?
-
So, just to be clear, if I chose a non-responsive theme, could I still use CSS to turn off the sidebar on smaller screens?
Absolutely, we can do that with CSS.
- The topic ‘Side Bar Customization with Theme’ is closed to new replies.
WordPress.com Forums 