Editing original CSS

helalds · Member · Jun 26, 2014 at 5:06 pm
Copy link

Add topic to favorites
Please, help me with editing CSS. I don’t want any padding in main body. I want body padding 0 0px. Please, show me how to do it. I want help for this custom site: http://povertyri.com/

The blog I need help with is: (visible only to logged in users)
jeremeylduvall · Member · Jun 26, 2014 at 6:46 pm
Copy link
Hi Mohammad,

If I understand correctly, you would like to remove the padding between the buttons on the front of your customized Ever After theme. If so, can you give this a try and let me know if it accomplishes the look you’re going for?
```
#recent-content img, .entry-content img, .entry-image img, .entry-thumb img, .comment-content img, .widget img {
	padding: 0px;
}
```
helalds · Member · Jun 27, 2014 at 2:56 am
Copy link
Dear jeremeyduvall

Thanks a lot for your help. But, I am sorry for not being able to clarify my problem. All I wanted is to to remove the surrounding (background) space like this one http://www.momodasolutions.com/index.html.

Moreover, I am new in CSS. Please, show me in detail. I would be grateful.
jeremeylduvall · Member · Jun 27, 2014 at 3:37 pm
Copy link
Hi Mohammad,

Are you referring to the black background around your slideshow? If so, that can be accomplished through the following CSS:
```
div.slideshow-window {
    background-color: inherit;
    border: none;
}
```
Just input that under Appearance -> Customize -> CSS. Also, just for future reference, we have a forum devoted to CSS customizations here:

https://en.forums.wordpress.com/forum/css-customization

In case you’re interested to learn a bit more, we have some information and resources here:

http://en.support.wordpress.com/custom-design/editing-css/

Let me know if you need anything else!
helalds · Member · Jun 27, 2014 at 4:05 pm
Copy link
Hello jeremeyduvall

It works really good. Thanks a lot for the help. However, I would like to request you for coding to make my site without border like your site http://jeremeyduvall.com/, without margin and border. Thanks in advanced for your help.
helalds · Member · Jun 27, 2014 at 4:30 pm
Copy link
I mean like this code:
body {
margin: 0px;
padding: 0;
}
jeremeylduvall · Member · Jun 27, 2014 at 5:01 pm
Copy link
Hi!

Ah – I believe I understand. You would like to remove all of the borders on the Ever After theme. You can accomplish this with the following CSS:
```
#page {
	box-shadow: none;
}

#page:before {
	border: 0px solid #fff;
}

#page:after {
	border: 0px solid #fff;
}

.entry-content h1 {
	border-bottom: 0px solid #fff;
}
```
Can you give that a try?
helalds · Member · Jun 28, 2014 at 2:19 am
Copy link
Hello jeremey

Thanks for the help. The code above helped me to have the appearance I wanted. However, though page border has been removed but page width remain same. I want it like this site http://www.momodasolutions.com/index.html
with page size fitted as screen width.

Can you also show me how to make the slideshow more dynamic like this page http://www.momodasolutions.com/index.html.

I am really grateful to your helpful mind.
helalds · Member · Jun 28, 2014 at 11:08 pm
Copy link
Hello,
One more thing, please. I have tried with this code below and it make the page width adjusted as the size of screen. However, the contents of the page get aligned to the left of page!!!
#page {
margin-top: 0px;
margin-left: 0px;
position:relative;
max-width: 1500px;
width: 100%;
}
jeremeylduvall · Member · Jun 29, 2014 at 4:55 pm
Copy link
Hi Mohammed,

It looks like you were able to achieve much of the look you want with the following CSS on the Ever After theme:
```
#gallery-159-5-slideshow .slideshow-slide img  {
    width: 1800px;
    height: 1000px;
    padding: -80px;
    border-width: 0px;
    margin-left: -100px;
    margin-top: -80px;
	margin-bottom: -80px;
}
```
Just a note, the code also influences how your site appears on mobile devices. I would encourage you to potentially add a qualifier so that the code does not affect the appearance on mobile. Something like the following will prohibit this code from going into affect if the screen is a certain size:
```
@media screen (min-width: 500px) {
#gallery-159-5-slideshow .slideshow-slide img  {
    width: 1800px;
    height: 1000px;
    padding: -80px;
    border-width: 0px;
    margin-left: -100px;
    margin-top: -80px;
	margin-bottom: -80px;
}
}
```
That way, your site looks great on mobile devices as well as desktop browsers.

As far as the slider actions on the following blog:

http://www.momodasolutions.com/index.html

That won’t be possible through CSS. That’s an effect of the slider on that page, and one that isn’t possible to enable at WordPress.com.

Please let me know if you need anything else!
helalds · Member · Jun 30, 2014 at 2:24 am
Copy link
Dear jeremeyduvall

Thanks for all this help. I will be in touch with you if there is an issue.
helalds · Member · Jul 1, 2014 at 9:28 am
Copy link
Hi jeremeyduvall

I need some additional help in case of slideshow caption. I have tried with this code but it is not working.

.slideshow-slide-caption {
font-size: 20px;
font-family: inherit;
color: #F7F7F7;
text-shadow: 1px 1px 2px #FFF;
}

Please, help me with the issue.
jeremeylduvall · Member · Jul 1, 2014 at 2:44 pm
Copy link
Hi Mohammad,

It looks like the right selector for this element is:

div.slideshow-slide-caption

Instead of:

.slideshow-slide-caption

When I use that selector in the CSS code you’re using, it works on my side:
```
div.slideshow-slide-caption {
font-size: 20px;
font-family: inherit;
color: #F7F7F7;
text-shadow: 1px 1px 2px #FFF;
}
```
If you would like to make the text more visible against the background, you could add something like:

background-color: #000;

If you’re still having trouble, can you explain a bit more about what you’re looking to accomplish with the caption modification?
helalds · Member · Jul 1, 2014 at 9:55 pm
Copy link
Hi Jeremey

This is working. WOW! I am very grateful to you for this help. I will be in touch with you.
helalds · Member · Jul 4, 2014 at 3:58 am
Copy link
Hello Jeremey

Hope you are fine. I have another help request to make slideshow more dynamic. Can we use some transition code or something else. I have tried myself but didn’t work. It is looking naive. Please, help me out.
jeremeylduvall · Member · Jul 6, 2014 at 3:25 pm
Copy link
Hi Mohammed,

Can you let me know what you mean when you say “dynamic”? Are you looking to change the slide transitions? If so, that won’t be possible (to create a different slide transition). At WordPress.com, the side-to-side transition is the only option for the slideshow shortcode.
helalds · Member · Jul 6, 2014 at 4:44 pm
Copy link
Thanks, a lot for reply. Now I understand the limitation.
jeremeylduvall · Member · Jul 7, 2014 at 1:53 pm
Copy link
Now that I think about it a bit more Mohammad, it might be possible to tweak the slide transitions with CSS. Can you try posting to the CSS customizations forum here?

https://en.forums.wordpress.com/forum/css-customization

The gurus there will be able to let you know for sure.
helalds · Member · Jul 11, 2014 at 12:30 pm
Copy link
Dear Jeremey

Thank you for your suggestion regarding slideshow. I have tried there and been confirmed that we need java script for transition.

However, I have another problem with which I need your help to tackle this. I have tried with code below to reposition my home page images.

#recent-content img, .entry-content img, {
border: 0px none;
box-shadow: none;
height: auto;
margin-left: -54px;
max-width: 112.5%;
padding: 0px;
margin-bottom: 0px;
margin-top: 0px;
}

However, it changed the position of images all over the site pages (like http://povertyri.com/about-us/people/).

I want to apply this code above only for home page Images, not for other pages or post.

Please, help me in this regard.

jeremeylduvall · Member · Jul 14, 2014 at 3:28 pm

Hey Mohammad,

Can you give the following CSS a try? I just added a selector that should isolate the front page only:

.post-159 #recent-content img,  .entry-content img, {
    border: 0px none;
    box-shadow: none;
    height: auto;
	margin-left: -54px;
    max-width: 112.5%;
    padding: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
}

1 2

The topic ‘Editing original CSS’ is closed to new replies.

Editing original CSS

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media