Need help? Check out our Support site, then


Code help recommendation

  1. I believe I need CSS to help with:
    Reduce body text size to 14pt, increase navigation menu text size to 18pt
    eliminate light blue sidebar background
    reduce size of all elements in sidebar so it doesn't draw away so much attention from the main content, perhaps an 11pt font
    once the sidebar is up out of the way, the two-column main body should be able to center on the page without interference from the sidebar. if unable to accomplish this, eliminate sidebar altogether.

    I also need to figure out how to make my header description more clearer. Is there a way to drop the header description away from the image? Without compromising my image or is there a way to make the font/color clear and visible even with the image in the background?

    The blog I need help with is fteswl.com.

  2. Hi there, on the font sizes, for the web pt isn't the best thing to use since the web and computer monitors work basically in pixels (px). For the body text size, add the following and adjust the 14px value as desired.

    .entry-summary, .entry-content {
    	font-size: 14px;
    }

    To remove the light blue background on the sidebar, remove this from your custom CSS.

    #site-sidebar {
    	background-color:#6cf
    }

    To reduce the size of your social icons, find this in your custom CSS and reduce the font size.

    .widget_wpcom_social_media_icons_widget .genericon {
    	font-size:65px;
    }

    For the iTunes button, find this in your custom CSS and reduce the max width as desired.

    #text-7 a {
    	background-size:100% auto !important;
    	max-width:80% !important;
    	width:100% !important;
    	height:100px !important
    }

    To reduce the sidebar text and link font size, add the following and adjust the 12px value.

    .sidebar .widget, .sidebar .widget a {
    	font-size: 12px;
    }

    once the sidebar is up out of the way, the two-column main body should be able to center on the page without interference from the sidebar.

    I'm not sure I understand what you are wanting here. The above sounds like you want to eliminate the sidebar. If what you are wanting is to narrow the sidebar and widen the content area, add the following at the very bottom of your custom CSS.

    @media screen and (min-width: 992px) {
    	.sidebar-area {
    		width: 25%;
    	}
    	.content-area {
    		width: 75%;
    	}
    }

    I also need to figure out how to make my header description more clearer. Is there a way to drop the header description away from the image? Without compromising my image or is there a way to make the font/color clear and visible even with the image in the background?

    Are you talking about the tagline below your site title that starts with "Welcome to From the Eastside with Love..."? It looks pretty clear to me in white. Museo Sans is not the clearest font at smaller sizes like in the tagline, so we could try taking it back to the original font, Open Sans, which is clearer. Add the following to your custom CSS and see what you think with the original font.

    .wf-active .site-description {
        font-family: "Open Sans",sans-serif;
    }
  3. Thank you for helping out with the codes.

    Yes the tag line on the mobile site it kinda looks hard to read. It is more clear on the desktop version. I just don't want people to ignore what the site is about. I also want it to be as clear as possible.

  4. Thanks for the clarifications. We can try adding a translucent background color to the site description. The following does that in two steps. The first for narrower than 1024px and then the second for screens 600px and narrower, where the tagline does get lost. Add this to the bottom of your custom CSS and see what you think. The last numbers between the parentheses in the background color declaration are the alpha transparency. The closer to 1, the more opaque. You can play with those as desired.

    @media screen and (max-width: 1024px) {
    .site-description {
    	background-color: rgba(0, 0, 0, 0.3);
    	padding: 5px
    }
    }
    @media screen and (max-width: 600px) {
    .site-description {
    	background-color: rgba(0, 0, 0, 0.5);
    }
    }
  5. Thank you!

    It worked I see that little box around the header description and it makes the text pop out more!!! I do have one more question. I notice on the desktop the image isn't the full image you see on the mobile interface in the header/title area. Is there a way to show the full image on the desktop like it does on the mobile?

  6. I noticed I don't see the box around the header description on my desktop is it only applied to mobile/tablets? Because on my tablet and phone I see it fine

  7. Also my social media icons shrunk again I just need them to be silent bigger the twitter, fb, YouTube, ig icons. Slightly

  8. Also is there possibly a way to move the email follower widget that I have to its own sidebar to the left of the site instead of the right?

  9. Hi, on the social widgets, you added some more CSS to size the links in the sidebar widgets and it is overriding the CSS we had put in to enlarge the social icons since it has a more specific CSS selector. Find this in your custom CSS

    .widget_wpcom_social_media_icons_widget .genericon {
    	font-size:95px;
    }

    and add .sidebar at the beginning like this.

    .sidebar .widget_wpcom_social_media_icons_widget .genericon {
    	font-size:95px;
    }

    On the header image, we can reveal more of it on larger screens by increasing the top and bottom padding in .site-header. The top/bottom padding is the first number (2.5rem).

    @media screen and (min-width: 768px) {
    	.site-header {
    		padding: 2.5rem 0;
    	}
    }
  10. I did the box on the tagline only on screens 1024px and smaller since you had mentioned mobile. Remove those two media queries and replace with this to have that box on all sized screens.

    .site-description {
    	background-color:rgba(0,0,0,0.5);
    }
  11. Thank you.

    The head image behind the description is blurry compared to the mobile version. It's basically stretched out is there a way to get a clearly headline picture for the the desktop website version?

    Also in your opinion now is the social media icons too big now. Ideally I would want them to either be in a row or 2 up top 2 below.

    What is a good attractive font for the FTESWL headline title.

  12. The search bar feature on the top right of the website on the desktop version is there a better place to put it?

  13. I did a bit of testing, and ion my 27" desktop monitor, Safari is more clear than Firefox and Chrome comes in at number three. When I view them on my Retina display on my Macbook Pro, the same is true, but all three are more clear than on my desktop monitor (I believe the desktop monitor is 96ppi and the MBP Retina is 226ppi). iPhones are either 326ppi on most versions, and 401ppi on the 6+ and 6s+, so they will typically always look more clear.

    The recommended header image size for Arcane is 1920 x 150 pixels, and your image is 1920px x 1080px. I would suggest cropping that original image in your image editing program to the perhaps 300px tall and then upload and set that as your header image and see how it looks.

  14. Thank you for your response about the header I'll crop it or put a new one.

    What do you think about the social media icon sizes are they too big? I wanted 2 up 2 down but I don't want them to be too big on the site. Possibly the same size or a little bit smaller.

    Any attractive title/header fonts to look at for? Also for the body?

    Is there a way to place the search bar on the top right of my site somewhere else? Or actually on my page instead of off the top.

  15. As they stand right now, with three and one, they look a good size. If you wish to keep them this size, we can increase the right margin on the li elements in that widget and get things to two rows of two.

    .sidebar .widget_wpcom_social_media_icons_widget li {
    	margin-right: 45px
    }

    On fonts, I like clean and simple, but some like things more... something. You can try out as many combinations as you wish, which is one of the benefits of the customizer.

    Is there a way to place the search bar on the top right of my site somewhere else? Or actually on my page instead of off the top.

    We can move it, but do to the way it operates, it would be problematic. What about adding a search widget to the top of your sidebar? What we could do would be to hide the top black section on screens/windows 768px and wider, when the sidebar is at the right of the content, and then hide that search widget at 767px and narrower and un-hide the top search feature. Let me know your thoughts.

  16. I added the code in CSS but it's still 3 up top 1 below.

    I hear what you're saying about the fonts.

    I don't want my side bar to be overloaded with things. As you can see it's pretty stacked as it is... unless we can possibly put it as a footer? Does that seem user friendly? Or maybe possibly add a side bar on the left side of the website where I can also put my email widget too.

  17. Arcane has a footer widget area, so you could put a search widget there. Due to the way the top search expands when open, we would have problems with it at the bottom, so I would suggest hiding it at top and using the search widget in the footer.

  18. Ok let's try that.

    How about the deilmma of how my social media icons aren't lining up in a row of 2's

  19. On the desktop it shows 2x2 but on my mobile and app it shows 3 on the top 1 on the bottom.

  20. On the social icons, let's lessen the padding on screens 480px or narrower and have them all on one line with the following.

    @media screen and (max-width: 480px) {
    	.sidebar .widget_wpcom_social_media_icons_widget li {
    		margin-right: 15px;
    	}
    }

    If you wish to maintain the 2 x 2, then we would want to add the following.

    @media screen and (max-width: 480px) {
    	.sidebar .widget_wpcom_social_media_icons_widget li {
    		margin-left: 40px;
    		margin-right: 40px;
    	}
    }
  21. Ok I took your advice and placed it all in one line.

    I have the search bar widget on the bottom of the page so we can try to widen up top to make that search option unavailable.

    Is there a way with my current theme to show different categories/sections on the main page. Right now it just shows the latest posts I put up. But is there a way to show like the latest posts in the social pieces section as an example. To show the posts from the sports/pro wrestling section. I would like to show the top 2-3 latest posts from the different catagories.

  22. This will hide the black band and search at the top of your site.

    .site-bar {
    	display: none;
    }

    Is there a way with my current theme to show different categories/sections on the main page. Right now it just shows the latest posts I put up. But is there a way to show like the latest posts in the social pieces section as an example. To show the posts from the sports/pro wrestling section. I would like to show the top 2-3 latest posts from the different catagories.

    Not really in the way you want to show them. We can use CSS to remove certain categories of posts from the post listing on the main page, but we cannot really show them in sections by category. That is beyond CSS.

  23. Now, let me back up a bit. If you used a Static Front Page on your site, you could use a couple of the Display Posts Shortcode and set them to display only a certain category and then set the number of posts you wish to show.

    You could then also set up a Posts Page (Blog) and add that to your top menu and then visitors could also go there to see all the posts.

    I should have through of that. I think I need more coffee. :)

  24. Let me see if I understand. Will doing the display posts shortcode only work for 1 category?

    I would like to post up each section: sports, movies, social topic pieces categories on display on the "main page" as opposed just having the blogs on the main page. I checked the video about the static webpage and I see it can change your home page to a specific page.

    I'm not sure if I am making sense but if I am and I can't do what I'm asking with my current theme. Is there a couple of other themes you can recommend me looking at to achieve this.

  25. As opposed just having the latest*** posts*** on the main page.

    lol I am not a coffee drinker but I'll take some tea.

  26. You could add multiple display posts short codes, one for each category you wished to show on the static front page. A sample code would look something like this.
    [display-posts category="social-topic-articles" posts_per_page="3"]
    For the wrestling.
    [display-posts category="sportspro-wrestling-articles" posts_per_page="3"]

  27. Would each short code move up depending on what is the latest post? So if I drop a podcast episode and five minutes later I post a wrestling article would that move the whole sports/wrestling section over the podcast episode section or where ever I place the section it won't jump other categories no matter what is posted. It would only go on top of the last post in that section.

  28. I created a static front page. I'm not sure if I did it properly though. I made the home page from the Eastside with love.

    I would like the short code display sections to be

    Podcast episodes

    Sports & pro wrestling articles

    Movies/music/games reviews

    Social topic pieces

    I also would like to change podcast episodes from a page into a category so I can start adding my recent podcast episodes.

    As far as the tabs on the top right below the header they will still be up there correct?

  29. 3 post per page is perfect if that's gonna display on the main page

  30. The shortcodes would show you latest 3 posts, or whatever number you decide on. With what you have mentioned, you will end up with 4 sections on the main page one below the other. You can add your own titles above the shortcodes and we can add some additional styling and such to get things to look the way you want them to.

    For Podcast Episodes, what you will want to do is to make those podcasts into posts and then, if you do not have it already, create the Podcast Episodes category and assign that to your Podcasts.

    The navigation at the top will still be there. You will have to replace the Podcast Episodes menu item with the category.

    I would suggest adding the shortcodes, or at least one or two to the home page and then we can work from there once we can see them on the site.

    If you do not want to play with your front page while it is live, what you could do would be to create a draft page and work out the shortcodes and then when then copy/paste the code into the main page when ready.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags