Remove Author and the word “Portfolio” from Portfolio

  • Remove Author and the word “Portfolio” from Portfolio
    Viewing 15 posts - 1 through 15 (of 24 total)

  • cleverdigital
    Participant
    #3035

    H
    Client has requested that we remove the author information and divider line from the Portfolio circles so they can display the title only. They like the animated magnifying glass but would prefer to have a link icon in its place so the user can click to read more. If not possible we will just remove, how do we do that?

    Also the word “Portfolio” appear in the left hand top corner of the portfolio item. We would like to remove this.

    And finally (this may not be feasible) they want to change the background solid colour of specific circles e.g. they are all red atm, would like a few other colours mixed up.


    cleverdigital
    Participant
    #3036
    This reply has been marked as private.

    Omar
    Keymaster
    #3050

    Hello CleverDigital,

    You can remove the divider, author and icon by adding the following to you Custom CSS panel.

    .circleDetailsWrapper p, .circleDetailsWrapper .zoomRecent.zoomCircle{
    display: none;
    }
    —————————————
    I suggest you use another way of linking to the portfolio items, using Images blocks. I hope you don’t mind, I created a private page for you to get a really clear idea of what I mean.
    Check the page /circle-portfolio-coloured/

    To do this, I created a page with 4 image blocks, Selected Circle image type and added a block ID for each image.
    In Custom CSS I’ve added the following block of code, which colored each circle flip with a different color.

    #candy-porto-one .circleAnimationDetails.back.circlePostDetails {
    background: #E70489;
    }
    #candy-porto-two .circleAnimationDetails.back.circlePostDetails {
    background: #F49426;
    }
    #candy-porto-three .circleAnimationDetails.back.circlePostDetails {
    background: #00B0E5;
    }
    #candy-porto-four .circleAnimationDetails.back.circlePostDetails {
    background: #87C73F;
    }

    Note the (#candy-potro-number) that’s the ID I used.
    ——————————————————-
    I changed the portfolio slug for you, using /party/ instead of /circleflip-portfolio/
    You can change that back or to anything else at Theme Options >> Pages settings >> Portfolio page

    ——————————————————–
    Do you want to remove the Portfolio title all together or would like to change it to something else?
    I’ve removed it for now, let me know if you would like it back saying something else 🙂

    Cheers


    cleverdigital
    Participant
    #3066

    Hi Omar

    Wow, you did a great job with this, didn’t think this would be possible. Notice some limitations, when you go mobile view they aren’t clickable and in ipad vertical mode the text in side is too small to read. However, the solution to the specific coloured animations is brilliant. I understand the Custom CSS, and then adding the Block ID to each element; but what would I replace ” .circleAnimationDetails.back.circlePostDetails” with, in order to add the specific colours to the rectangle animations in the current portfolio?
    ————————
    Yes, Portfolio title to be removed altogether, thankyou for doing this, much appreciated
    ————————
    Small thing that is buggy, when you view a portfolio item that has a portrait image, you cannot scroll down to see the bottom menu. There is a big chunk of empty space below the footer menus; if this could be removed then we wouldn’t have this issue. And the footer would look better overall. Please let me know how I can reduce this empty space.
    ————————
    New request from client: “Is it possible to change the icons you used? the ‘Gallery’ to a camera icon and the link to an ‘i’ for information?”


    cleverdigital
    Participant
    #3089

    Hi Omar
    As per above, can you let me know:
    – what would I replace ” .circleAnimationDetails.back.circlePostDetails” with, in order to add the specific colours to the rectangle animations in the current portfolio?
    – Where can I change the icons when you rollover a portfolio item? I need to change the ‘Gallery’ icon to a ‘Camera’ icon and the ‘Link’ icon to an “I” (information) icon.

    Client won’t sign off on the invoice until these two elements are changed and I really need to complete this website to buy Christmas presents!


    Omar
    Keymaster
    #3100

    Hello Clever Digital,

    Sorry for the late response,

    Fixing the mobile and tab clickable issue could be handled by changing to this version of the image block I am attaching, which will make the Title link-able with the same link provided for the image click.

    http://goo.gl/L2lGX2

    Please replace the file found at /themes/circle-flip/creiden-framework/content-builder/blocks/cr-image-block.php

    –To change the rectangle image hover color, that would be
    #candy-porto-one .portfolioHomeCont2 {
    background: #E70489;
    }

    — I am sorry I didn’t quite get the footer with portrait problem. Please include a url and a screen shot if possible.

    I am looking into the icons request for you, and will get back to your shortly,
    Regards.


    Omar
    Keymaster
    #3101

    For the icons, I replace them using the following CSS
    .linkRecent:after {
    content: ‘e81e’ !important;
    color: white;
    font-family: “fontello”;
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 2.5em;
    }
    .linkRecent{
    background-image: none !important;
    }
    .icon-picture:before {
    content: ‘e909’;
    }

    But note that I couldn’t find a camera icon other than the Instagram one! hope it works for you.

    Sorry again for the delay,
    And happy holidays


    cleverdigital
    Participant
    #3127

    Hi Omar

    Thank you very much. We will be going live in the next few days so will surely feature this site in your showcase.

    Kind regards


    Omar
    Keymaster
    #3133

    Will Sure do,

    Please shout it out here and I’ll spread the word 🙂

    Regards.


    cleverdigital
    Participant
    #3145
    This reply has been marked as private.

    Omar
    Keymaster
    #3149

    Hello Clever Digital,

    I am sorry for your time lost on this, hopefully I can help you get it up and running today.

    For the missing Icons all you need was slash
    I edited your css to be
    content: ‘e81e’ !important;

    I see the colors applying correctly, all you are missing are image titles.
    For boxed images, you can either add a title block “heading block or text block” on top or under the image, or if you would like I can edit the block again for you to have in the image options.

    Let me know what else is missing and I’ll help out

    Regards


    cleverdigital
    Participant
    #3153

    Hi Omar
    Thanks, the icons now work, brilliant, see http://192.185.159.215/~candyhai/kids-parties/

    The problem still remains regarding colour on this page. The ‘portfolio preview animation’ for each post image needs to change. It seems the solution you suggest is to replace the portfolio post previews with Image blocks. I assume this will allow us to change the colour of each image block animation using the custom IDs. Then add in the heading and text to mimic the presentation of the Portfolio page.

    See my example: http://192.185.159.215/~candyhai/circle-portfolio-coloured/ (or http://candyhair.com.au/circle-portfolio-coloured/ when DNS change happens)

    I’ve added the heading and text and changed the images to square. The colours now work, but only when animation is set to Hover Style 2 (as it is set now). We need hover style 1, at its the same animation as portfolio preview. When set to Hover Style 1 we get the correct ‘I’ icon but the Gallery link is missing altogether and the custom colours then don’t work.

    Thanks, hope we can get this sorted soon.


    Omar
    Keymaster
    #3156

    Hello Clever Digital,

    Hope everything is alright.
    for style 2 please use

    #candy-porto-two .squarePostCont{
    background-color: #F49426 !important;
    }

    in contrast to style 1’s

    #candy-porto-three .circleAnimationDetails.back.circlePostDetails {
    background: #00B0E5;
    }

    Check it now and you’ll see it working 🙂
    Please don’t hesitate to ask for anything else.

    Cheers


    cleverdigital
    Participant
    #3159

    Hi Omar

    Fantastic, the custom colours now work. The link to the portfolio item gallery with the camera icon is still missing though. You can see it on the Kids parties page.


    Omar
    Keymaster
    #3160

    Hey there,

    was just missing a slash, check it now

    Cheers.

Viewing 15 posts - 1 through 15 (of 24 total)

The topic ‘Remove Author and the word “Portfolio” from Portfolio’ is closed to new replies.