Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 3, 2014 at 12:49 am #204798
    Munford

    hi, I am trying to make a customized team member item, with an image that is linked to another page (with more info and videos), and with links to facebook and linked in underneath the team member name. I found the shortcode but would like the icons to be next to each other centered under the photo. (similar to the bottom boxes here http://thisistouch.com/wp/this-is-old/who-we-are/) I only see an option for “left”, “right” or “center”. Can you help me with this? thanks

    • This topic was modified 10 years, 10 months ago by Ismael.
    January 3, 2014 at 3:16 am #204829
    Ismael

    Hey MUNFORD!

    Add the two social icons align them to the left then add this on your Quick CSS to move to the center.

    .av_font_icon {
position: relative;
left: 40%;
}

    Adjust the left position. If you want to change the style of a specific element on a certain page or post, you can use the Google Chrome Inspect Element. Look for the unique css body class.

    On the example above, the page’s unique selector is .page-id-2251. We can use it to change the element within that page. 

    .page-id-2251 .av_font_icon {
position: relative;
left: 40%;
}

    Best regards,
    Ismael

    January 3, 2014 at 10:57 am #204955
    Munford

    HI Ismael,
    I made the changes you suggested but it’s not changing the position of the icons.
    the page I am looking at is here: http://www.copenhagenfilmcompany.dk/2014/pages/about-us/.

    I have added this to the quick css:
    .page-id-1195 .av_font_icon {
    position: relative;
    left: 40%;
    }
    what am I doing wrong??
    I would also like to know how to put a little more space between the icons –

    • This reply was modified 10 years, 10 months ago by Munford.
    January 3, 2014 at 11:49 am #204963
    Ismael

    Hey!

    Please try to use this instead:

    .page-id-1195 .av_font_icon.avia-icon-pos-left {
position: relative;
left: 40%;
margin-right: 10px;
}

    Adjust the right margin. :)

    Regards,
    Ismael

    January 3, 2014 at 12:04 pm #204967
    Munford

    thanks but it still is not centering…this with the right margin set to 100: http://www.copenhagenfilmcompany.dk/2014/pages/about-us/
    can you tell me what the left: 40% refers to?
    I don’t understand the parameters there.

    January 3, 2014 at 11:15 pm #205172
    Josue

    Hey!

    Try with this code:

    .post-entry-1195 .av_font_icon {
    display: inline-block;
    float: none;
}
.post-entry-1195 .el_after_av_one_third .avia_textblock p:last-child{
    text-align: center
}

    Result:

    Cheers! 
    Josue

    January 4, 2014 at 2:31 pm #205315
    Munford

    thanks – but I can’t seem to get anything added to my quick css to work – any ideas?
    also – is there a way to put a space between the social icons?

    • This reply was modified 10 years, 10 months ago by Munford.
    January 4, 2014 at 4:55 pm #205347
    Josue

    Hi!

    This would be the final code:

    .av_font_icon {
    margin: 0 5px;
}
.post-entry-1195 .av_font_icon {
    display: inline-block;
    float: none;
}
.post-entry-1195 .av_one_third .avia_textblock p:last-child {
    text-align: center
}

    Add it to this file instead.

    Best regards,
    Josue

    January 5, 2014 at 4:51 pm #205574
    Munford

    HI, thanks for the info. some more questions:

    1. How do I keep the social icons on the left, but with some space between them?

    2. I am trying to make my logo smaller only on mobile devices, with this code:
    .responsive .logo img { height: 55px; }
    but that also resizes my logo on the web. I’d like it to be pretty big (700×156 or so)
    on the web and smaller on the mobile. ?? see it here: http://www.copenhagenfilmcompany.dk/2014/

    3. How do I change the vertical spacing of the text in text blocks like on this page:
    http://www.copenhagenfilmcompany.dk/2014/about-us/
    I’d like the names and titles to be closer together, without changing the font size.

    Thanks! Theme is great and so is your support = kudos for putting up a support forum outside
    of themeforest – searchable!

    • This reply was modified 10 years, 10 months ago by Munford.
    January 5, 2014 at 7:58 pm #205640
    Josue

    Hey!

    1. This will add an space between them:

    .av_font_icon {
    margin: 0 5px;
}

    2. This will do it:

    .responsive .logo img, .responsive .logo { height: 88px; width: auto !important; max-width: none !important;}
@media only screen and (max-width: 767px) {
  .responsive .logo img, .responsive .logo { height: 55px; }
}

    3.

    .post-entry-1195 .avia_textblock p, .post-entry-1195 .avia_textblock h3 {
    margin: 0 !important;
}

    Regards,
    Josue

    January 13, 2014 at 3:31 pm #208980
    Munford

    HI
    I have a couple of questions.
    1) I am trying to embed video from vimeo and you tube on blog posts, but I don’t get a preview image.
    http://www.copenhagenfilmcompany.dk/2014/news-3/dsb-the-joint-approach/ What am I doing wrong?
    If I instead link a url for the video to an image, then there are no video controls and it opens in a pop-up window, which I don’t want. I want it to look like the samples you have on the demo – called “Another title for our pretty cool blog”. I don’t see any other video options on the blog post editing page.

    2) Here on support – how do you make a new topic? I am editing previous topics but don’t see an easy “start topic” link.

    3) I have been reading here about how to add social icons to the footer, facebook & linkin, but can’t understand how to do it. I was able to add it to the socket, but it didn’t line up correctly and I would rather have it in the first column of my footer under the search widget. Suggestions?

    thanks very much. love the theme.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘adding a social icon’ is closed to new replies.