Sketch theme CSS Customization
-
I am currently using the Sketch theme and I would like to know if there’s an CSS snippet for the following 3 requests.
1. When you click on any of the posts of the main page, it will take you to the post, on those posts there’s gonna be an image cartoon. The size of that image in that post seems quite big and looks blurry. Is it possible to make that image smaller on any post?
2. On the main page once you try to click on any of the posts, a hover will appear and the text will turn from light gray to orange, can we change that orange text to some other color? Black perhaps?
3. At the bottom of the main page you will see the WordPress logo in the footer. I would like to add a copyright text in the bottom centered. Is there a snippet for that?
The blog I need help with is: (visible only to logged in users)
-
Hi, @elcapicap.
You can learn more aab wordpress theme customization here: https://wordpress%5Bq~.%5Dcom/themes .
Hope this helps.
Regards: @storygenie5
-
Hi again. I made a mistake when sending over that link, so I will resend it.
Sorry about the inconvenience caused to you due to this typo that I made.
Best regards: @storygenie5.
-
Hi there,
The size of that image in that post seems quite big and looks blurry. Is it possible to make that image smaller on any post?
I visited one of the posts from your homepage, and it is shown large, but for me it does not appear blurry. This is the one I looked at: https://foosboleros.com/portfolio/cabecita-mvp/
If you wish to make this image smaller you can edit your blog post and the adjust the size, as shown in the video linked here: https://d.pr/v/Zaat5K
a hover will appear and the text will turn from light gray to orange, can we change that orange text to some other color? Black perhaps?
Can you share a screenshot of what you are seeing so we have an example? I looked on your site but I could not find the hover effect on my own.
To share a screenshot with us, you can upload it to the Media Library on your site, and then copy the image URL. You can see a video of how to do this here: https://d.pr/v/Fcnerp
Once you have the image URL just paste it into your reply and we will be able to see your screenshot, thanks!
At the bottom of the main page you will see the WordPress logo in the footer. I would like to add a copyright text in the bottom centered. Is there a snippet for that?
It is possible to use CSS code to add text (but no links) in that area. What is the text you want to appear there? Thanks for the additional info!
-
1. I was able to make the images smaller through the post block. Thanks.
2. This is the link of the screen shot.
If you take a look. The first image has a gray color post text. On the second middle image, once you put the cursor into that post you will see that the post text will change from gray to orange. I would like for that orange text to change to black.
3. The text i want for the footer is
© 2021 foosboleros.com
-
Ah gotcha, thanks for clarifying!
That can be changed in your customizer settings here, under the Color & Background tab. I recorded a video to show you how to access the color swatch to change it’s color: https://d.pr/v/WB7aTT
For your footer, click on the CSS tab and add this code:
.site-info:before { content: "©2021 foosboleros.com"; display: block; font-size: 14px; }This will add your text to the footer as requested.
Hope that helps. Please let us know if you have any more questions.
-
I was able to change the color of the text as you showed me on the video. Thank you.
Now. I added the social media links on the footer section and once you put the cursor into one of the social media logos, orange color comes in. Is there a snippet to change that orange color to another color?
I also added a search button into the widget section. When you click into the menu bar from the top, let’s say on the “blog” category, the search bar will appear on the right hand side of the page, but when you click into one of the posts from the main page, let’s say the “Cabecita MVP” one, the search bar doesn’t appear on the right side. Is there a reason why, or is there a snippet to fix that?
-
Hello there,
Now. I added the social media links on the footer section and once you put the cursor into one of the social media logos, orange color comes in. Is there a snippet to change that orange color to another color?
The CSS you would require is:
/* Change social media footer */ .social-links ul a[href*='twitter.com']:hover:before, .social-links ul a[href*='facebook.com']:hover:before, .social-links ul a[href*='instagram.com']:hover:before { background: black; }I also added a search button into the widget section. When you click into the menu bar from the top, let’s say on the “blog” category, the search bar will appear on the right hand side of the page, but when you click into one of the posts from the main page, let’s say the “Cabecita MVP” one, the search bar doesn’t appear on the right side. Is there a reason why, or is there a snippet to fix that?
The portfolio template is designed to not have a sidebar, presumably to put the focus on the content itself.
You could manually build this into the portfolio content using a columns block: https://wordpress.com/support/wordpress-editor/blocks/columns-block/
And then add a search widget: https://wordpress.com/support/widgets/search-widget/
-
Thank you for the social media snippet and for the columns block tutorial.
Would there be a snippet for the following.
If you click on the second image post in the main page (the rabbit holding the trophy) It will take you to the post, if you scroll down that post, right below the comment section there’s gonna be a text that says “mas proyectos”. Is there a snippet to make that text a text of my choice lets say to “Ilustraciones”?
On the menu bar there is two categories, all of my posts are under the “Ilustraciones” category but when you click on the “Ilustraciones” category on the menu bar, there’s not posts under that category and it says there’s nothing to be found and the search option appears. Is there as snippet or a way to fix that?
-
Hello there,
…text that says “mas proyectos”. Is there a snippet to make that text a text of my choice lets say to “Ilustraciones”?
This CSS here should change that.
/* Change "More Projects" */ h1.more-projects { font-size: 0px; font-weight: 400; font-style: normal; } h1.more-projects:after { content: "Ilustraciones"; font-size: 19px; font-weight: 400; font-style: normal; }…but when you click on the “Ilustraciones” category on the menu bar, there’s not posts under
It looks like a link to a post category has been added into the menu. Instead you should add a project type link, as seen here:
Also, to note, to get help in real time rather than in the forums, please reach out for assistance here: https://wordpress.com/help/contact
I hope this helps.
-
I was able to fix the menu bar as you explained.
Would there be a snippet for the following.
I added the slider to the main page. The text for the post name is in black. Is there a snippet to make that post name text white in that slider instead of black?
Is there a snippet to get rid of the date of that post from that slider? Just to leave the post name text in there.
As you can see I added the slider to the main page. I added the latest post to it but I noticed that the latest post appears in the slider and also on the grid below the slider. Is there a snippet to when I add a post to the slider, that post only appears in the slider and also not in the grid? And eventually when I get rid of it from the slider, it goes back to the grid as normal.
- The topic ‘Sketch theme CSS Customization’ is closed to new replies.
WordPress.com Forums 