Review CSS

This topic contains 10 replies, has 3 voices, and was last updated by  Alex Rollin 6 years, 6 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: , ,

  • Author
    Posts
  • #402526

    Marcus Conway
    Expired Member
    Post count: 126

    Hi there,
    I would like to smarten up the review section as it takes up a lot of space. Can you help me?

    1. Remove blank space between latest and “LEAVE A REVIEW”
    2. Delete text “LEAVE A REVIEW”
    3. Delete space after “LEAVE A REVIEW”
    4. Delete area saying “Drop files to upload” and all blank space surrounding
    5. Delete “place drag and drop images…” and all space surrounding
    6. Reduce size of review text box by 50%

    I appreciate this is a lot to ask but though I would see if you can help me?
    Thanks

    #402535

    Kor
    Moderator
    Post count: 16516

    Hi Marcus,

    Please share the URL of the site in question so we can take a better look at it and also WP temp admin access to your site. We’ll try our best to help you with this. You can post the details here using the private reply option below.

    Thanks!

    #402662

    Marcus Conway
    Expired Member
    Post count: 126
    #402701

    Kor
    Moderator
    Post count: 16516

    Hi Marcus,

    Apply the custom CSS code below and uncheck the option shown in the attached screenshot to disable image upload on comments.

    
    
    h3#reply-title {
        display: none!important;
    }
    
    #reviewsTab #respond {
        margin-top: 0px!important;
    }

    Thanks!

    #402876

    Marcus Conway
    Expired Member
    Post count: 126

    Thanks that css worked. Regards the images. I still want this feature but I only want to show the option of the orange box without the text “Drop files to upload” and without the padding

    #402903

    Kor
    Moderator
    Post count: 16516

    Hi Marcus,

    Alright. Here you go.

    
    
    div#comment_imagesplupload-upload-ui h4 {
        display:none!important;
    }
    #402908

    Marcus Conway
    Expired Member
    Post count: 126

    Great that worked – no how do I remove

    “Please drag & drop the images to rearrange the order” and the padding around it?

    #402915

    Alex Rollin
    Moderator
    Post count: 27815

    Hello!

    You can remove text by editing the translation files.

    Adjusting the uploads area may have unintended consequences for usability.

    Try this and adjust to your needs:

    
    
    #upload-msg {
        display: block;
        clear: both;
    }

    For further CSS customization please consider using chrome dev tools. Check out the screen shot attached.

    Open Inspector (Right click on element, Select inspect)
    In code view, hover cursor over html to identify the element.
    When identified, right click and select Copy -> Copy selector
    Go to the CSS area and click the plus sign to add a new entry for the selector
    Edit CSS to suit your needs

    You can also select “hide element” and inspector will write the CSS for hiding the element for you.
    After that you copy it out and paste as needed.

    #402918

    Marcus Conway
    Expired Member
    Post count: 126

    Wow cool – thanks

    #402925

    Marcus Conway
    Expired Member
    Post count: 126

    Where do I select “hide element”?

    #402939

    Alex Rollin
    Moderator
    Post count: 27815

    Hello!

    Using inspector to hide elements is a multistep process also.

    Open Inspector (Right click on element, Select Hide Element)
    In CSS area, inspector will write the code for you (watch closely!)
    Go to the CSS area, copy, and paste into you GD -> Design -> Scripts

    If it works in inspector, but not when you paste into GD, try clearing site and browser cache.

    Thanks!

Viewing 11 posts - 1 through 11 (of 11 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket