Change Goran "Read More" Tag

jembelfashion · Member · Dec 13, 2014 at 1:05 am
Copy link

Add topic to favorites
Hi! Is it possible to change the “Read More” with CSS in Goran Theme? Thank you.

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Dec 13, 2014 at 7:57 am
Copy link
CSS can only used to change styles. So you cannot change any text. At best, you can hide it.
thesacredpath · Member · Dec 13, 2014 at 6:36 pm
Copy link
Sometimes the text is within a span tag and we can hide the text and then use the :before or :after pseudo selector to replace the text, but Goran has it directly in HTML link code, so as staff-happychia says, we can’t do it in this case.
staff-happychia · Staff · Dec 13, 2014 at 11:07 pm
Copy link
Thanks for the pseudo selector prompt, thesacredpath.
thesacredpath · Member · Dec 14, 2014 at 12:12 am
Copy link
You are welcome staff-happychia.
jembelfashion · Member · Dec 14, 2014 at 6:41 pm
Copy link
Thank you guys. I hid the “read more” tags.
jembelfashion · Member · Dec 14, 2014 at 8:02 pm
Copy link
Please need help again with CSS and the theme I’m using is the Goran theme:

1. When I ‘Set Featured Image’ for the Front Page, it cuts off the image as you can see on the site (the lifted foot is cut off) no matter how I reduce or increase the image.

2. For the side widgets, can I reduce the gap between each widgets?

3. On the Landing Page, can I reduce the white space between the “Front Page”, “Grid Page” and so on?

4. The gray line between the grid page and the widget below, can I change the color too?

5 Last question? In “Customize”, When adding a new css code, do you just continue on the next line?

Really battling with learning how to use css but one step at a time. Thank you for any help!
jembelfashion · Member · Dec 14, 2014 at 8:32 pm
Copy link
The blog I need help with is http://jembel.com/
thesacredpath · Member · Dec 15, 2014 at 4:18 am
Copy link
1. When I ‘Set Featured Image’ for the Front Page, it cuts off the image as you can see on the site (the lifted foot is cut off) no matter how I reduce or increase the image.

The following will shift the image to the right so that the foot and show is visible. It targets only the home page featured image.
```
.home.hero-image .hero {
    background-position: left 50%;
}
```
2. For the side widgets, can I reduce the gap between each widgets?

Give the following a try. There is both a top and bottom margin on the widgets.
```
.archive .hentry, .blog .hentry, .search .hentry, .content-area, .featured-page, .featured-page-area, .footer-widget-area, .front-page-widget-area, .grid, .grid-wrapper, .widget, .widget-area {
padding-top: 24px;
}
.archive .hentry, .blog .hentry, .search .hentry, .content-area, .featured-page, .featured-page-area, .footer-widget-area, .front-page-widget-area, .grid, .grid-wrapper, .widget, .widget-area {
    padding-top: 24px;
}
.widget {
    padding-bottom: 24px;
}
```
3. On the Landing Page, can I reduce the white space between the “Front Page”, “Grid Page” and so on?

Add the following and adjust the 24px value.
```
.featured-page {
    padding-bottom: 24px;
}
```
The following will let you adjust the space between the featured image and the first row of featured images.
```
.featured-page-area {
    padding-top: 72px;
}
```
This will adjust the space at the top of the front page widgets.
```
.front-page-widget-area {
    padding-top: 72px;
}
```
4. The gray line between the grid page and the widget below, can I change the color too?

Adjust the hex color number in the following.
```
.has-quinary .featured-page-area {
    border-bottom: 2px solid #d2cfcf;
}
```
5 Last question? In “Customize”, When adding a new css code, do you just continue on the next line?

Take a look at our CSS Basics support page for more on the structure of CSS.
jembelfashion · Member · Dec 15, 2014 at 8:19 am
Copy link
Wow! Thanks theSacredPath! Look forward to the day that I will be able to write codes like that!

For No. 2, the css below worked for the widget area but it tampered with the Front Page and shifted the “Shop Shoes” up.

.archive .hentry, .blog .hentry, .search .hentry, .content-area, .featured-page, .featured-page-area, .footer-widget-area, .front-page-widget-area, .grid, .grid-wrapper, .widget, .widget-area {
padding-top: 24px;
}
.archive .hentry, .blog .hentry, .search .hentry, .content-area, .featured-page, .featured-page-area, .footer-widget-area, .front-page-widget-area, .grid, .grid-wrapper, .widget, .widget-area {
padding-top: 24px;
}
.widget {
padding-bottom: 24px;
}

Sorry for all the questions. Thank you for your plenty help. understanding it as I go along.
jembelfashion · Member · Dec 15, 2014 at 8:40 am
Copy link
3. Did you mean that I should change the 24px value in the code below to whatever value I want it to be

.featured-page {
padding-bottom: 24px;
}
thesacredpath · Member · Dec 15, 2014 at 3:12 pm
Copy link
Hmmm, my bad on #2. Let’s do the following to limit this change to the sidebar widgets only.
```
.widget-area .widget {
padding-bottom: 24px;
}
```
Edit the 24px value as desired.

#3, yes, edit the value as desired.
jembelfashion · Member · Dec 15, 2014 at 6:32 pm
Copy link
Sorted! Thank you theSacredPath. You really helped out.
thesacredpath · Member · Dec 15, 2014 at 10:10 pm
Copy link
You are welcome.
domagroupitalia · Member · Jan 14, 2015 at 10:20 am
Copy link
Hi everybody,
I’m sorry but I’m quite “new” to CSS, HTML and stuff like that :|
In the beginning of this topics chaitanyamsv says that it’s possible to hide the “read more” button… How can I do that?!
Thanks!!
thesacredpath · Member · Jan 14, 2015 at 9:00 pm
Copy link
To hide the Read More button on Goran, you can use the following CSS.
```
.entry-summary .more-link {
    display: none;
}
```
domagroupitalia · Member · Jan 14, 2015 at 9:44 pm
Copy link
Thank you so much thesacredpath.

Just one another question: in the grid page, below each featured image of the child pages you see the text of them… I’d like not to show such text in the grid page. Is it possible?
thesacredpath · Member · Jan 15, 2015 at 6:14 pm
Copy link
To get rid of the summary text in the grid page, you can use the following CSS.
```
.grid .entry-summary {
    display: none;
}
```
domagroupitalia · Member · Jan 16, 2015 at 9:34 am
Copy link
Again, thank you so much thesacredpath!
thesacredpath · Member · Jan 16, 2015 at 9:08 pm
Copy link
You are welcome.

No items found.