Return to previous page

WooPress Flowers template and other style questions

This topic has 8 replies, 2 voices, and was last updated 8 years, 9 months ago ago by Eva Kemp

msarlo

Participant

February 22, 2016 at 06:46
Hi,

Some of the questions below relate to styling my site (http://proven.sarlitt.me) like the Flowers template. I’ve already gone to Theme Options > Import/Export > Install Flowers and have the WooPress child theme activated. However, my site doesn’t match a lot of the Flowers styling. I’d like to use the Flowers demo as my base, then customize it. Is there something else I need to do?

1. Separator with text block: http://screencast.com/t/5Tnw4gCUJg. I’m using custom.css to control the font color, but the font-family isn’t working. Current code:
```
.happy_client_header {
	color: #A61D30;
	font-family: 'Arial', sans-serif;
	font-weight: bold;
}
```
2. I’d like my FAQ page to look like the demo: http://screencast.com/t/yL2jFAPUU. I created a new page and used the FAQ Visual Composer template, but the styling is stripped out: http://screencast.com/t/0KoITqlux. How do I activate the base style from the demo?

3. Align headshot in team member block: http://screencast.com/t/i0tdbUGNIyY. How can I center align the image as shown in the screenshot?

4. What method do you suggest for controlling spacing between block elements on any page? For example, reducing the space between the “happy clients” separator and the brand logos on my homepage: http://screencast.com/t/MvhusrLsZc. I’ve tried playing with padding-top and padding-bottom on block elements, but can’t seem to close the gap.

5. How do I make a custom page header like the About Us page in the demo? https://www.8theme.com/demo/woopress/flowers/about-us/. I see how to set a custom background, back cannot figure out how to customize heading and subheading text (with breadcrumbs removed).

Please, contact administrator
for this information.
#114111 Copied Theme version: 2.8
7 Answers
Eva Kemp

Support staff

February 22, 2016 at 10:28
Hello,

1. You need use this code to change font family:
```
.vc_separator h4 {
    font-family: 'Arial', sans-serif !important;
}
```
2. You need select bordered style in FAQ element settings:
http://storage9.static.itmages.com/i/16/0222/h_1456132662_1178951_820b402476.png
Do this for all FAQ elements you added.

3. Use this css code:
```
.team-member .member-image {
    text-align: center;
}
```
4. You can add margin bottom value 0px in the row settings or try to use negative value like -30px.

5. You can use Text element in Visual Composer editor and add your content, then add image in the row settings http://storage3.static.itmages.com/i/16/0222/h_1456133331_1346467_a5ce6cb74c.png .

Regards,
Eva Kemp.
#114139 Copied
msarlo

Participant

February 25, 2016 at 09:51

Great, thank you. I have a few more questions related to spacing:

1) On the homepage, I’d like to reduce the spacing between the nav bar and the headline (text block): http://screencast.com/t/Gz9buOZrm. I’ve tried to adjust padding-top and margin-top of the text block, but cannot get the space to reduce.

2) Similarly, I’d like to reduce the spacing between the nav bar and the custom header text block on all other pages: http://screencast.com/t/aeyy1ZfXzs8. Reducing padding-top and margin-top in the text block settings does not seem to work here either.

3) On my contact page, how would I get the top of the Google map to touch the bottom of the header text block? I have tried adjusting padding/margin of both elements. Also, how do I get it to extend to the same width of the header?

4) Are there settings for the black header strip in the dashboard, or do I just control that with the CSS class .header-type-17 .header-top ?

5) I have custom.css in wp-content > themes > woopress. Will that get overwritten when you release theme updates?

Thanks!

#114767 Copied Theme version: 2.8
Eva Kemp

Support staff

February 25, 2016 at 10:35
Hello,

1./2. Please add this code in Theme Options > Custom CSS > Global Custom CSS:
```
.page-content {
    margin-top: 0px;
}
```
3. I’ve added margin-top value -35px for the map row in the row settings. Also I’ve changed map width in the Google Map settings element in Map Width Override section.
Check it now.

4. You can hide that bar using this css code:
```
.header-type-17 .header-top {
    display: none;
}
```
5. This file will be saved after update.

Regards,
Eva Kemp.
#114775 Copied
msarlo

Participant

February 25, 2016 at 22:39
Thanks. There is a new issue after the #1/2 fix though. The “hotspot” area of the header links is smaller, and slightly above the link: http://screencast.com/t/ZBwyQ7sj0 (except “About” on far left). I believe the headline is overlapping the links: http://screencast.com/t/2aU4unTI

I also noticed that the header links on the right side are closer together than the ones on the left. The words are also shorter, so it causes the overall navigation to not be center aligned with the headline below it. I originally added this css below to space out the links. How would I increase spacing on the right side, or just make sure the nav links are center aligned as a whole?
```
.header-wrapper .menu > li > a {
	padding-right: 19px;
	padding-left: 19px;
}
```
Regarding the Google Map, I wanted it to be the same width as the text block above it. I changed the css override to “apply 1st parent element’s width” and that did the trick.
#114957 Copied Theme version: 2.8
Eva Kemp

Support staff

February 26, 2016 at 09:30
Hello,

The reason is you have this code in custom.css file:
```
h1 > strong {
    text-transform: none;
    font-size: 64px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    padding-top: 100px;
}
```
Remove padding-top: 100px; and check menu then.

Do you want to increase items spacing only for right menu?
If so use this code:
```
#menu-main-navigation-right.menu > li {
   margin-right: 20px !important;
}
```
Regards,
Eva Kemp.
#115002 Copied
msarlo

Participant

February 27, 2016 at 02:15

Awesome, those both worked. Great service.

#115130 Copied

Eva Kemp

Support staff

February 27, 2016 at 09:25

Hello,

You’re welcome.
We’d be glad if you leave a comment on ThemeForest site http://themeforest.net/item/woopress-responsive-ecommerce-wordpress-theme/9751050/comments .

Thank you.
Regards,
Eva Kemp.

#115141 Copied
Tagged: flowers, questions, style, templates, woocommerce, woopress, wordpress
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘WooPress Flowers template and other style questions’' has been successfully resolved, and the topic is now closed for further responses

WooPress Flowers template and other style questions

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection