Social media buttons

Hi there, OK:

1. We can use CSS to move elements around, but it maybe simplest for you to create the logo with the background included in photoshop (or whatever application you're using) - then its a case of just adding a logo, without a background and then you can center the header in the customiser.

2. You currently have this CSS:

#site-navigation {
border-top: solid 1px rgba(136,136,136,0.5);
border-bottom: solid 1px rgba(136,136,136,0.5);
}

Just remove the two rules (border top and bottom) and replace it with: border: solid 1px rgba(136,136,136,0.5);

3. To change the widget title background color just change the #111 to another hex color in the code i provided here:

https://generatepress.com/forums/topic/social-media-buttons-2/#post-618860

4. I have updated the code, as the widgets have moved the ID has changed.

Hello David, yes as to my logo you are completely right, it will be much easier to do all the job in photoshop.
As to the About me picture, it is still not round though, what do think it could be the problem then if the code is updated now?

OK for the About Image. go to the Text Widget. Make sure the visual editor is selected so you can see the image, click on it and click the pencil to edit the image. Open up the advanced options, and in the Image CSS Classes add a class e.g border-radius

Then add the CSS like so:

.widget img.border-radius {
    border-radius: 100%;
}

I have done that, but still doesn't work.

I have edited the CSS above, can you retry that.

Still, doesn't work, i copied the code in simple CSS, may be it has to be done in aditional CSS?

It just worked, after I deleted a code for the border line between the main body and widgets, thanks a lot!

OK, can you add that CSS to the very top of your CSS in Simple CSS?

yes, i will do that!
1.I also wanted to ask how do I reduce the huge space between the title follow me and my now round picture?
2.All my widgets and the content are not alligned with the lenght of menu bar on the sides,how do i do that?
3. THe border line between the body and the right sidebar widgets, goes until the end, but I would like to however that it seperates them only until there is something to seperate, meaning that it finishes on the same line as subscribe.
4..Now that i changed the logo and put it in between the background image, it looks horrible in the mobile version, as there is a leftover from another repeated image,how do i remove that?

OK, so now that works, it means you have an error somewhere else in your CSS, you can check for errors on this site, select the by Direct Input tab and paste your CSS in there:

https://jigsaw.w3.org/css-validator/

1. Customiser > Layout > Sidebars - reduce the bottom widget padding.

2. Menu width like so - you may need to reduce the padding on the right sidebar:

#site-navigation {
    max-width: 1200px;
}

3. Find the CSS that you added for the border to the #primary and replace it with this:

@media (min-width: 768px)
    .inside-right-sidebar {
        border-left: 1px solid rgba(136,136,136,0.5);
    }
}

4. You need to remove the background image from the header

yes, it all worked very well:
1.but as to the borderline between the body and widgets and the border around the menu bar, why those lines look differently, even though they have the same color and thickness description in the codes?
2.As to the mobile version, the tagline is on the top of the logo, but I would like to have it underneath the logo the same way as in the web version. Also in the mobile version, the logo which is connected with the painted world map looks quite blurry, even though it is not the case in the web version and neither in my original drawing file.

1. I am not seeing the difference in the border lines. It could be the browser, maybe check whether you have the browser view zoomed in there can be some visual distortion between horizontal and vertical lines.

2. You can use this CSS to re-order the elements:

@media (max-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .site-branding {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

Likewise i am not noticing any visual difference between the logos. If you are keeping with a white background then you may be better of using a JPEG image instead of a PNG.

Thanks a lot for your patience!As to point 2, it worked but then i changed the image of logo, and now it doesnt work again. If I change the logo image again, where do I have to make the change in the code, in order not to bother you every time?

Not a problem, here to help.
I can't see that code in place. And changing the logo image should not effect that one. Can you check you have it in your CSS. Again, if the code isnt working at the bottom of the CSS then add it to the top :)

Yes, it worked perfectly once I shiftet the code to the top. And where do I reduce thespace between the tagline and the menu bar in mobile version? In web its perfect though, just on mobile a bit too big.