Forum Support

Shape 5
March 29, 2024, 04:13:33 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [Urgent] Recreating your Instagram feed demo?  (Read 1532 times)
chrisvp
Jr. Member
**
Offline Offline

Posts: 6



« on: August 19, 2017, 07:23:45 AM »

Hi there,

I have come across your site and I'm amazed with some of the extensions you have on offer and will be definitely be looking  at purchasing some in the near future to finish off my clients site!

My question today though is in regard the demo you have setup on your 'S5 Instagram Feed'  and the way you have the words 'our images from Instagram' on my feed - see attached image

Could you please advise me on how to replicate this style/setup as I thought this was how it would look once installed, and it would look perfect of my site: https://ri2k.london

Regards!
Chris H
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: August 21, 2017, 11:57:33 AM »

Hello Chris,

Thanks happy to hear you like them!

This is actually a module style that is included with the Attractions template. You can do the horizontal layout as shown just not the module title overlay. A lot of templates include custom CSS, etc that style our modules to look different to match the template. Here is a more standard look for the feed module (and again the horiztonal layout is possible from the admin of the module):

https://www.shape5.com/product_details/free_extensions/s5_instagram_feed_-_joomla_module.html
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chrisvp
Jr. Member
**
Offline Offline

Posts: 6



« Reply #2 on: August 21, 2017, 05:06:42 PM »

Hi there,

Yes thats how I've got my mine setup at the moment in the standard way, (which is very good and working ok) but need to display a nice text overlay to say its our 'instagram' feed.

If you could give me any code that would somehow replicate the style you have on the Attractions template that would be a big help as I cannot see what I need to copy when looking via the google inspect?!

Thanks,

Chris.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 on: August 22, 2017, 12:19:49 PM »

Hey Chris,

Here is the CSS we used for the demo but you may have to edit to fit with your template. Most important would be switching the  #s5_pos_custom_5 out to a DIV ID you place it in. If you need any further help you can hire us via the custom service area of our site:

Code:
/* overlaytitle_right */

.module_round_box.overlaytitle_right h3.s5_mod_h3 {
    margin-right: 253px;
    margin-top: 79px;
    position: absolute;
right: 0;
text-align: right;
    z-index: 1;}

.module_round_box.overlaytitle_right .s5_h3_first {
    color: #fff;
    display: block;
    font-family: times new roman;
    font-size: 1.5em;
    font-style: italic;
    font-weight: normal;
    letter-spacing: -1px;
    margin-bottom: 18px;
    text-transform: lowercase;}

.module_round_box.overlaytitle_right h3 .s5_h3_last {
    color: #fff;
    font-size: 2.7em;
    font-weight: normal;}

.module_round_box.overlaytitle_right, #s5_pos_custom_5 .module_round_box_outer {
margin-left:0px;
margin-right:0px;}

.module_round_box.overlaytitle_right:hover h3.s5_mod_h3 {
display:none;}
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chrisvp
Jr. Member
**
Offline Offline

Posts: 6



« Reply #4 on: September 01, 2017, 04:38:27 AM »

Hi there,

I cannot seem to replicate the ccs you have on your Instagram feed on the Attractions template.  I have tried to add the module id (from my template) and also tried different positions the instagram module is positioned on my site in place of the #s5_pos_custom_5 - but nothing seems to work!?

Can you tell me should I be making these changes in a custom.css file or should they be done in the modules css?

And finally can you possibly let me know if I should be changing the beginning of each line module_round_box.overlaytitle_right as well??

Thanks again,
Chris.


Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #5 on: September 01, 2017, 11:49:57 AM »

It doesn't matter what CSS file you place the changes into, just as long as its in there.

Quote
let me know if I should be changing the beginning of each line module_round_box.overlaytitle_right as well??

I'm not sure what you mean by this?
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chrisvp
Jr. Member
**
Offline Offline

Posts: 6



« Reply #6 on: September 01, 2017, 12:37:06 PM »

Hi there,

Thats ok I'm testing in my custom.css file via the page inspect.

When I mentioned the 'module_round_box.overlaytitle_right' that is seen in the bit of code you posted...its at the beginning of each .line below

I was just wondering if I have to adapt this bit of the code that you use on your site? or does that stay the same.

Thanks
Chris
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #7 on: September 04, 2017, 11:11:20 AM »

Oh ok, it should stay the same for the most part. But some minor edits might be needed, like font size, etc
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chrisvp
Jr. Member
**
Offline Offline

Posts: 6



« Reply #8 on: October 07, 2017, 05:47:07 AM »

Hello again,

In regard to the custom code mentioned in this post, to be able to setup the normal Shape5 Instagram module in the style Attractions template has it....

Could you possible quote to do these minor changes to convert your code on to my site, as I've tried but failed to get it setup and working.

I know you have the 'Custom Service' option on your site, but as the code is already done and just needs coping/setting up on my site is there any way to do this a bit cheaper?

Regards!

Chris H.

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #9 on: October 09, 2017, 12:17:18 PM »

It may not be that easy depending on what template you are using and if the CSS works smoothly when transferred over. Additional CSS edits might need to be made. Is your site running a Shape5 template?
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chrisvp
Jr. Member
**
Offline Offline

Posts: 6



« Reply #10 on: October 12, 2017, 04:08:36 AM »

Hi, no my template is Joomlarts Brickstore on the T3 framework.

Thanks
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #11 on: October 12, 2017, 10:49:36 AM »

Ok then yes it most likely could case additional CSSing to get working as the CSS between our frameworks differ from each other. If it was a Shape5 template then yes it would be cheaper. But unfortunatly it would fall under the "Layout Customization" custom service option here: https://www.shape5.com/custom_services.html
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.