- This topic has 53 replies, 4 voices, and was last updated 5 years, 5 months ago by Leo.
-
AuthorPosts
-
July 9, 2018 at 7:41 am #619237DavidStaffCustomer Support
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.
July 9, 2018 at 8:35 am #619390GunaHello 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?July 9, 2018 at 9:06 am #619426DavidStaffCustomer SupportOK 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%; }
July 9, 2018 at 9:27 am #619456GunaI have done that, but still doesn’t work.
July 9, 2018 at 9:33 am #619460DavidStaffCustomer SupportI have edited the CSS above, can you retry that.
July 9, 2018 at 9:43 am #619469GunaStill, doesn’t work, i copied the code in simple CSS, may be it has to be done in aditional CSS?
July 9, 2018 at 9:55 am #619477GunaIt just worked, after I deleted a code for the border line between the main body and widgets, thanks a lot!
July 9, 2018 at 9:57 am #619478DavidStaffCustomer SupportOK, can you add that CSS to the very top of your CSS in Simple CSS?
July 9, 2018 at 10:23 am #619502Gunayes, 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?July 9, 2018 at 10:48 am #619518DavidStaffCustomer SupportOK, 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
July 9, 2018 at 11:40 am #619563Gunayes, 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.July 9, 2018 at 11:51 am #619566DavidStaffCustomer Support1. 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.
July 9, 2018 at 2:39 pm #619676GunaThanks 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?
July 9, 2018 at 2:49 pm #619684DavidStaffCustomer SupportNot 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 🙂July 9, 2018 at 11:31 pm #619873GunaYes, 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.
-
AuthorPosts
- The topic ‘Social media buttons’ is closed to new replies.