Code help recommendation

  • Author
    Posts
  • #2916669

    fteswl
    Member

    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.

    #2916771

    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;
    }

    #2916918

    fteswl
    Member

    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.

    #2916920

    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);
    }
    }

    #2916922

    fteswl
    Member

    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?

    #2916923

    fteswl
    Member

    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

    #2916931

    fteswl
    Member

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

    #2916941

    fteswl
    Member

    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?

    #2916948

    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;
    	}
    }

    #2916949

    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);
    }

    #2916951

    fteswl
    Member

    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.

    #2916952

    fteswl
    Member

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

    #2916953

    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.

    #2916955

    fteswl
    Member

    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.

    #2916956

    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.

    #2916957

    fteswl
    Member

    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.

    #2916958

    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.

    #2916959

    fteswl
    Member

    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

    #2916960

    fteswl
    Member

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

    #2916961

    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;
    	}
    }

The topic ‘Code help recommendation’ is closed to new replies.