[richard5]

Hi
I have inherited a web site that used teh free version of Interface, which i have upgraded to Pro. I have 2 issues with this theme and will deal with them separately.

The recent Word wigit has been used to display the content of 3 pages accross the home page. We would like to be able to extend the height of these text windows to display all the text in all 3 source pages. We have 2 rows of these and will want to change both rows. We do not want to have to click through to the page to see all the text.

Can the height of these wigits be extended to include all the text.

Also, is it possible to make 2 articles fit accross the page because we would like 3 accross the first row (as now) and 2 accross the row below.

Thanks

Richard

[Theme Horse Support Team]

Hi Richard,

To extend the height of the text to display all the content you have to add the content in excerpt field. To display excerpt field/panel in page editor, click on screen options at the top of the specific page and check the excerpt box where you can see the excerpt box at the bottom of the page there you can add the content which will display on the three pages across the homepage.

To show only two article in recent widget just set the two pages and leave all the field blank and paste the below custom css to show the two article fit across the page.

.widget_recent_work .one-fourth {
    width: 47.02%;
}

If you are having trouble please let us know your exact page link so that we can provide you the custom css.

Thank you!

[richard5]

Hi
Thanks, the first item worked perfectly. I am not sure exactly where to place the css you sent. Can you guide me here please?

Richard

[richard5]

Apologies, the site url is http://www.ascensystraining.co.uk/

[Theme Horse Support Team]

Hi Richard,

Go to Appearance -> Theme Options/ customize -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button

.widget_recent_work .one-fourth {
    width: 47.02%;
}

.widget_recent_work .call-to-action {
    display: none;
}

The new css is to disable the green readmore button displayed just below the Our Directives.
Thank you!

[richard5]

HI
Sorry, ive probably misled you. What i would like to do is make only the bottom 2 articles show as two accross the page whilst maintaining the top 3 as three accross the page. This css displays all 5 articles at half the page width.

Whilst i am looking at this page, i can see that the existing 3 artticles do not go accross the whole width of the page and i would like to add a sidebar to the right to show a testimonials widget.

Also, i did say there was another thing that i said i would keep separate but while we are doing this it now seems a good idea to mention. I would like the section at the bottom showing the directors to show their pictures to the left and their bio to the right of each respectivce picture to span accross the whole of the page. Is that possible also?

I have 3 issues.

1 make the bottom two articles to share the screen width 1/2 and 1/2 as opposed to 1/3 each
2 Add a side bar to the right
3 change the orientation of the directors images and bio.

Is all this possible please.
Thanks

Richard

[richard5]

Hi
Are you able to assist with these queries. I have other questions regarding the same theme but ought to do these in order if i can.

Thanks

Richard Berry

[Theme Horse Support Team]

Hi Richard,

Apologies for the late reply. We missed your topic.

As of your site widget placement we have provide you a below custom css:

First question: For to show the 3 section top and 2 section below across the page:

#interface_recent_work_widget-2 .one-fourth {
    width: 30.32%;
}
#interface_recent_work_widget-3 .one-fourth {
    width: 47%;
}

Second question: You can not add sidebar easily. It needs code customization.

Third question: For to change the orientation of the directors images and bio you can use testimonial widget as shown in the demo site which will show image to the left and bio to the right, However if you want to use the same recent work widget as in you site then please add below custom css but do not add widget title, content and action button as you did just in above widget.

#interface_recent_work_widget-4 .one-fourth {
    width: 47%;
}
#interface_recent_work_widget-4 .column a {
    float: left;
    width: 50%;
    margin-right: 20px;
}
#content #interface_recent_work_widget-4 .custom-gallery-title,
#interface_recent_work_widget-4 p {
    display: block;
    overflow: auto;
}

If you have any problem then let us know.

Thank you!

[richard5]

Hi
Thank you for this.
The first item works perfectly. The sidebar we shall leave for now if it is not easily possible.

The third item is almost there. We have changed the orientation of the Directors images and Bio using the css you sent but is it possible that the second one (the male) sits underneath the first, with the images to the left and the same size but the text spanning accross the whole of the remainder of the screen.

I have also noticed that not all the text from the post is diplayed. You told me how to deal with this a few posts ago and i have ticked the ‘Excerpt’ option in the posts but it has made no difference. Clicking throught on one of the images takes you to the whole text but it would be preferable if we could see it on the first page.

You have also suggested that we remove the widget title, and i can see why, but is it possible to add a title again to this section to identify the two individuals as Directors?

Many thanks

Richard Berry

[Theme Horse Support Team]

Hi Richard,

1. To change the orientation of the director images as you described first replace the first section with second one (male) and first section (female) to second. and add below custom css code to spanning the first section content across the whole of the remainder of the screen.

#interface_recent_work_widget-4 .one-fourth {
    width: 97%;
}
#interface_recent_work_widget-4 .one-fourth a {
    width: 25%;
}

2. May you have not add the full content in the excerpt as described here and also increase the excerpt value via Appearance > Customize > Advance options > Excerpt length there you can change the digit value as a length.

3. Add text widget above the directors section to add title as you did for the first widget section.

Thank you!

Regards,
Theme Horse

[richard5]

Hi
Thank you for this. I wasnt aware of the Excerpt Length setting so have adjusted that and it is just what we need. I have also added the text widget to give me a title.

I am still having issues with the Directors image and copy placement. You can see that the snippet of code you sent has done a perfect job on the female, that is just what we want, but the male text is still limited to half that page and the image is slightly smaller. Can you help with the css for that please. For clarity, i have included below the whole css i have placed in the Custom CSS section.

We also have one more issue. I have created a new post to show in the page slider at the top of this page. I can see where you add the identity of the 4th page to show the image and the short text, but the 3 existing pages are referenced by 2534, 2533 and 2535. I can not see where i pick that up from and so cannot actually add teh 4th page to teh slider sequence. How do we do this?

So we have just 2 matters now, the text and image of the Male directopr and adding the 4th slider page. The site is http://www.ascensyssurveys.co.uk

Thank you

Richard Berry

Here is the current Custom CSS
#interface_recent_work_widget-2 .one-fourth {
width: 30.32%;
}
#interface_recent_work_widget-3 .one-fourth {
width: 47%;
}
#interface_recent_work_widget-4 .one-fourth {
width: 47%;
}

#interface_recent_work_widget-4 .column a {
float: left;
width: 50%;
margin-right: 20px;
}
#content #interface_recent_work_widget-4 .custom-gallery-title, #interface_recent_work_widget-4 p {
display: block;
overflow: auto;
}

#interface_recent_work_widget-4 .one-fourth:first-child {
width: 97%;
}
#interface_recent_work_widget-4 .one-fourth:first-child a {
width: 25%;
}

[Theme Horse Support Team]

Hi

We have edited the above reply @52479. Now you current complete custom css will be as below.

#interface_recent_work_widget-2 .one-fourth {
	width: 30.32%;
}
#interface_recent_work_widget-3 .one-fourth {
	width: 47%;
}
#interface_recent_work_widget-4 .one-fourth {
	width: 97%;
}
#interface_recent_work_widget-4 .column a {
	float: left;
	width: 25%;
	margin-right: 20px;
}
#content #interface_recent_work_widget-4 .custom-gallery-title,
#interface_recent_work_widget-4 p {
	display: block;
	overflow: auto;
}

And to add fourth page slider you have to set the 4 instead of 3 in slider options via Go to Customize -> Featured post/page slider -> slider options -> Number of Slides there you can add 4 for no of slides in your slider and refresh your customizer page and you will see the new field for post/page id for your fourth slider.

Thank you!

[Theme Horse Support Team]

Hi

We have edited the above reply @52479. Now you current complete custom css will be as below.

#interface_recent_work_widget-2 .one-fourth {
	width: 30.32%;
}
#interface_recent_work_widget-3 .one-fourth {
	width: 47%;
}
#interface_recent_work_widget-4 .one-fourth {
	width: 97%;
}
#interface_recent_work_widget-4 .column a {
	float: left;
	width: 25%;
	margin-right: 20px;
}
#content #interface_recent_work_widget-4 .custom-gallery-title,
#interface_recent_work_widget-4 p {
	display: block;
	overflow: auto;
}

And to add fourth page slider you have to set the 4 instead of 3 in slider options via Go to Customize -> Featured post/page slider -> slider options -> Number of Slides there you can add 4 for no of slides in your slider and refresh your customizer page and you will see the new field for post/page id for your fourth slider.

Thank you!

[richard5]

HI
Thank you. Your reviced CSS has dealt with that display and orientation issue perfectly, thanks.

Regarding the slider, i had already found the option to add a fourth slider and can see the 4th field in the Featured Post/Page Slider Options section but can not determine exactly how to reference the new post i want. The first three fields contain the numbers 2534, 2533 and 2535 but i just cant see how these numbers relate to the existing posts so cant add the fourth one.

Where do i get the reference that goes in that fourth field?

regards

Richard Berry

[Theme Horse Support Team]

You need to add the post/ page id. You can find your post/page id using this plugins easily. Simply install it. Those provided numbers are the post/page id.

Thank you!

[Author]

Posts