Tweaking some things on my website's theme

mabsarts · Member · Nov 9, 2018 at 8:00 pm
Copy link

Add topic to favorites
Hello all, I am looking for some information regarding how to best customize my website, so far I have found that all the wordpress tools help me greatly, but there are still a couple of small things I would like to tweak.

Mostly just aesthetic at the moment, but I honestly have no idea on how to go about it, I imagine it would have to done by editing the CSS of the theme, but well I am at a lost. Hope you can help.

I am looking to:
1- Remove the black overlay the website is putting on the background image I have chosen
2- Move the whole menu bar, a bit further down, that it has the name of the artist at the top, the subtitle and then the menu bar below it.

I look forward to y’alls response, I hope you can help me with this.
Thank you,
– Antonio (MabsArts)

The blog I need help with is: (visible only to logged in users)
floflo56 · Member · Nov 9, 2018 at 11:30 pm
Copy link
Hi there,

If I understand, you want your menu bar to be further down on the home page?
And you also want the grey overlay in front of the image removed?

You can do this changes with some CSS.
To add CSS, please refer to this page : https://en.support.wordpress.com/custom-design/editing-css/

You can then try adding these CSS codes:

To put the menu further down on the home page :

.home header.site-header
{
margin-top: 150px;
}

You can change the value of 150 px to the one you find the best.

To remove the grey image on the home page:

.home .pique-panel-background:before
{
display: none;
}

Let me know if it works or if you have more questions :)
I hope this helps.

Florent
mabsarts · Member · Nov 19, 2018 at 2:21 pm
Copy link
Thank you so much for that Florent. The header works great, I was able to move it with that code, thanks.

The picture looks lighter, but it’s still not quite there yet, here is the actual picture and how the colors should look.
[img]https://www.newgrounds.com/dump/draw/94b389dfd8abc1908c04128af5a579e7[/img]
floflo56 · Member · Nov 19, 2018 at 2:48 pm
Copy link
Hi Mabsart,

Glad the header works.

To make the picture look lighter, you can try adding this CSS:

.home div.pique-panel-background {
opacity: 100;
}

:)
Let me know if it works as you wish

Florent
mabsarts · Member · Nov 19, 2018 at 2:55 pm
Copy link
Hey Florent! Thanks so much for that, almost ready. The colors look perfect, however the menu text is lost in the picture now. Is there any way to add a background color to the menu text so it doesn’t get lost in the picture?
floflo56 · Member · Nov 19, 2018 at 3:07 pm
Copy link
Hey Mabsart

it depends what kind of design you want but you can try this:

.home ul.menu.nav-menu
{
background-color: #11100f;
}
}

let me know if you would like something different
mabsarts · Member · Nov 19, 2018 at 3:15 pm
Copy link
Peeeerfect!!! Exactly what I needed, thank you so much Florent <3
mabsarts · Member · Nov 19, 2018 at 3:16 pm
Copy link
One more question, this might go on another topic, but how does the image preview option for each blogpost work? Because sometimes it shows the image gallery inside a post but other times it doesn’t and I would like for it to have the images always.
floflo56 · Member · Nov 19, 2018 at 3:17 pm
Copy link
You are welcome :)
mabsarts · Member · Dec 10, 2018 at 2:50 pm
Copy link
Hello everyone, any suggestions on how I could stop the website from bouncing when I scroll down on the homagepage? Maybe a way to disable scrolling on that page, since it doesn’t have anything to scroll down to, I’m guessing that’s why it bounces.

I appreciate your support <3
torres126 · Member · Dec 22, 2018 at 1:54 pm
Copy link
Hi there,

Apologies for the delay in the response with this. You can disable scrolling on your homepage by using the following CSS:
```
.page-id-4 {
overflow: hidden;
}
```
Let me know if that works for you. :)
mabsarts · Member · Jan 4, 2019 at 5:47 pm
Copy link
Thank you so much, that worked perfectly <3

No items found.