Loading ...

Space Permissions & Design Customizations | Communifire Support

Home » Spaces » Communifire Support » forum » Report Bugs and Issues » Space Permissions & Design Customizations
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Report Bugs and Issues

Space Permissions & Design Customizations

Subscribe to RSS
  • Answered

    /spaces/9/executive-team/Executive Team

    Can you Bold, Increase the font and Center all the headers on this page?

    In addition, remove all the name, date tracking from the articles and blogs.

  • See attachment

    Attachments
  • Hi Bernadette,

    I added a CSS class to the Executive Team homepage so it can be targeted with CSS.

    I added the following code in CSS Overrides to update the headers and hide the author name and time stamps for content. Let me know if everything looks okay.

    /*Widget header style for Executive Team homepage*/
    .executive-team-homepage .axero-widget-header h3 {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
    
    /*Hide author name and time stamp for content on the Executive Team homepage*/
    .executive-team-homepage .xs-newsroom-wide-columns .tile-time,
    .executive-team-homepage .ax-magazine-one-stack .small.nobold,
    .executive-team-homepage .meta.small {
        display: none;
    }

    Grace

  • (1) Can you help us get a CSS code to make these colors gradient? (See attached color palette)

    (2) Is there a way to "order" spaces in MY SPACES so that the spaces that administrators frequent more often are at the top. For example:  We would like to have the Executive Team and National Board of Directors to show at the top of the list of spaces.

    (3) Is there a way to embed a survey "directly" into an article so that you do not have to click a link but it is directly in the article when you click on it? Such as in Feedback, Suggestion & Suggestions on the Executive Team page.

      /spaces/9/executive-team/Executive Team

    /spaces/10/national-board-of-directors/National Board of Directors HOME

  • This code was created for me - are the highlighted areas normal to the code?

  • Hi Bernadette,

    1- Where do you want use the gradients? For the widget headers? So to confirm, you want these solid colors to be replaced with the gradients?

    2, 3- It isn't possible to do this. You can create posts for these in our Suggestions and Feedback forum. We reference this area when considering new features and enhancements to add to Communifire.

    4- The line marked by a yellow triangle isn't an error. You can ignore such warnings. If there's an error in the CSS, you'll see a red X:

    Grace

  • Thanks Grace.

    Regarding Question #1  - Yes, we would like to see gradient options if possible to further use our new logo palette.

  • Hi Bernadette,

    I updated your CSS overrides to add the gradients. The following custom CSS classes produce gradient headers now:

    • hot-pink-orange-exteam-header
    • purple-fuchsia-exteam-header
    • green-lime-exteam-header
    • blue-exteam-header

    Some of the widgets on the Executive Team page are using other custom CSS classes. To make their headers gradient as well, edit the widget, click the Advanced tab, and change the custom CSS class to one of the gradient class names above.

    Below is the updated CSS, for your reference.

    /*Widget header background color*/
    .axero-widget.hot-pink-orange-exteam-header .axero-widget-header {
        /*background: #D70073;*/
        background: rgb(215, 0, 115);
        background: linear-gradient(90deg, rgba(215, 0, 115, 1) 0%, rgba(241, 91, 65, 1) 50%);
        color: white;
        padding-bottom: 15px;
    }
    
    /*Widget header background color*/
    .axero-widget.purple-fuchsia-exteam-header .axero-widget-header {
        /*background: #5E2D91;*/
        background: rgb(94, 45, 145);
        background: linear-gradient(90deg, rgba(94, 45, 145, 1) 0%, rgba(198, 61, 150, 1) 50%);
        color: white;
        padding-bottom: 15px;
    }
    
    /*Widget header background color*/
    .axero-widget.green-lime-exteam-header .axero-widget-header {
        /*background: #00836D;*/
        background: rgb(0, 131, 109);
        background: linear-gradient(90deg, rgba(0, 131, 109, 1) 0%, rgba(119, 192, 67, 1) 50%);
        color: white;
        padding-bottom: 15px;
    }
    
    /*Widget header background color*/
    .axero-widget.blue-exteam-header .axero-widget-header {
        /*background: #034592;*/
        background: rgb(3, 69, 146);
        background: linear-gradient(90deg, rgba(3, 69, 146, 1) 0%, rgba(0, 184, 195, 1) 50%);
        color: white;
        padding-bottom: 15px;
    }

    I used CSS Gradient to get the gradient CSS code.

    Grace

  • I need assistance - 

    (1) I am assuming that everyone visiting the intranet (public) see the same view as I see? Example - navigation menu.

    I am considering a space page that does not have a navigation menu on the left. See attached design example. In viewing page builder, how do I hide or remove the navigation menu on the left to achieve the attached view. I would like to create the page below like the Communifire HR Sample.

    https://thehub.uptogether.org/spaces/11/human-resources/Human Resources

    (2) On the Executive Team page, I am working on various options to present "Feedback, Suggestions & Ideas. (You will see all options listed on the page.)

    https://thehub.uptogether.org/spaces/9/executive-team/Executive Team

    On the 2nd option, I completed a "Message Box".  I figured out how to add the color and change the language through CSS.

    For the 3rd Rich Text option - I need to embed the survey link. This the colorful one with the Feedback icon in various colors.

    For the 4th option - how do I get the text into the header? 

    (3) Can you add the Carousel banner navigation in the template for me. 

    (4) I have a couple of questions regarding files. In the "file" folder in the menu - I understand that files can be uploaded and organized into folders.

    • Are there additional layers for organizing files? Meaning, can folders have "folders" and so on?
    • Can you sort specific files within the search - example: can you ask it to sort most recent uploaded files, date order, etc.?
    • Are files in the menu connected in any way to file links uploaded in widgets, etc.? Other than they just live together on the same page?  
  • Hi Bernadette,

    1- Edit the page and uncheck "Include space photo and navigation."

    2- To add the survey link in the "Quick Survey" button, do the following:

    1. Edit the page
    2. Edit the widget
    3. In line 9, find href="#">Quick Survey
    4. Replace # with the link

    To delete the "Download Forms" button, do the following:

    1. Edit the page
    2. Edit the widget
    3. In line 9, delete <a class="btn btn-success" href="#">Download Forms</a>
    4. Save the widget and page

    To replace the lightning bolt icon with the feedback image, do the following:

    1. Upload the feedback image in the Media Assets space as a file
    2. Open the file
    3. Right-click the image > Copy Image Address
    4. Edit the page
    5. Edit the widget
    6. In line 6, find <i class="icon-bolt icon-2x"></i>
    7. Replace that line with: <img src="IMAGE_LINK" />
    8. Replace IMAGE_LINK with the link you copied
    9. The image link will have something like &v=1&driveID=0 at the end - delete this
    10. Save the widget and page

    Let me know if the image is too large.

    For the Rich Text widget, do the following:

    1. Edit the page
    2. Edit the widget
    3. Click the image to highlight it
    4. Click the Insert/edit link button in the toolbar
    5. In the Insert link modal:
      • Paste the survey link in Url
      • Enter a title
      • Set the link to open in the current tab (select "None") or in a new tab (select "New window")

    Could you clarify what changes you want to make for the fourth option?

    3- Have you checked the Carousel Banner Navigation Widget page? This page explains how to add the template to your site and create a navigation widget. Could you let me know which part you need help with?

    4- Yes, folders can contain folders.

    In search, you can sort results by most relevant, most viewed, most recent, most commented, highest rated, most liked, or date (oldest first).

    By "files in the menu," do you mean this link? This is the Files section in Communifire. The file links on the Executive Team page are Google Docs. These are separate from Communifire files.

    Grace

  • How do I make the icon smaller?

    Also, on the last feedback option - there appears to be a black dot above the icon image and a line shadow on the box. Can you help me figure out how to get rid of it?  

  • Hi Bernadette,

    1- Add the following code in CSS Overrides.

    /*Resize image in Message Box widget*/
    .axero-widget-message-box img {
        width: 50%;
    }

    If the image is still too big or small, you can resize it further by changing 50% above to a bigger or smaller value.

    2- The button widget is using the Nav - Banner Navigation Item template, which is bested displayed in a Navigation widget using the Nav - Banner Navigation template. Do you want the last option to look like Nav - Banner Navigation (see below)? Or do you just want to remove the dot and shadow?

    Grace

  • I want to remove the dot and shadow. 

  • Hi Bernadette,

    Please do the following:

    1. Edit the page
    2. Edit the widget
    3. Click the Advanced tab
    4. In Custom CSS class, add a space and standalone-nav-banner-item 
    5. Save the widget and page
    6. In Control Panel > System > CSS Overrides, add the following code, at the bottom
      /*Style for a button widget using the Nav - Banner Navigation Item template and with standalone-nav-banner-item as the custom CSS class*/
      li.standalone-nav-banner-item {
          list-style:none;
      }
      
      li.standalone-nav-banner-item div.xs-image {
          background-image: none!important;
      }
    7. Save CSS Overrides

    Grace

  • (1) On the Executive Team space page, at the very center of the page - Weekly Executive Update. How can I reduce the size of the article?

    (2) I would like to add the Bold & Bigger CSS code to all committee and ad-hoc committee pages. Is there a faster way to do this besides creating an individual CSS for each page?

    (3) I tried uploading a video to the Executive Team. It was too large. Is there a way to override this so that no matter the size of the video/recording, I will be able to upload? 

  • I am circling back to the questions above.

  • Hi Bernadette,

    1- You want to reduce the size of the entire widget, is that correct? How much smaller do you want the widget to be? 50% smaller?

    2- Does "all committee and ad-hoc committee pages" mean you want all widgets on all pages to have the bold and bigger headers? Or are there some pages/widgets where you don't want this?

    3- Yes, go to Control Panel > Content > Videos > Settings. Set "Maximum file size" to a large number.

    Grace

  • #1 - yes - let's start at 50%. 

    #2 - I would like all pages to be uniform. Instead of going to each page to include the CSS code - is there a quicker way to do it? 

  • Hi Bernadette,

    1- Add the following code in Control Panel > System > CSS Overrides.

    /*Executive Team homepage - Make Weekly Executive Updates widget smaller*/
    .executive-team-homepage .xs-newsroom-wide-columns .xs-content ul li:first-child a .tile-content .tile-content-text {
        padding: 70px 60px;
    }

    2- In CSS overrides, find the following code.

    .executive-team-homepage .axero-widget-header h3 {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }

    Remove .executive-team-homepage . The final result should be:

    .axero-widget-header h3 {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }

    Once you update this CSS code, all widgets will have the bold and bigger header font. You won't need to make any other changes to individual pages or widgets.

    Grace

  • Grace,

    When I changed the code for Bold , Center & Font. It didn't work.

    Also, I am trying to research other options within Communifire to upload a pdf other than Files. Are there other options. I see an iFrame response but not certain how that works.

     

     

  • Hi Bernadette,

    The widget headers in the Membership and Communications space are now bold and centered.

    Previously, they looked like this.

    The font size wasn't affected, however. Please find the below code in CSS overrides:

    .axero-widget-header h3 {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }

    And change the code to below:

    .axero-widget-header h3 {
        text-align: center;
        font-weight: bold;
        font-size: 18px !important;
    }

    This will make the font size bigger. The widget headers will then look like this:

    Files can also be attached to content like articles and blogs. Could you provide more information about your use case? Is there something specific that you're trying to accomplish that can't be done by uploading the PDF files in the Files section of a space?

    Grace

  • Files - I would like the option of including the Staff Organization Chart which is a PDF file within a click-able widget as opposed to going to Files to click a link. Trying to decide the best way to do it.

    On the Executive Team - I am trying to decrease the Get to Know Your Leader - Rich text box. I tried resizing the pic and the overall box size doesn't change. I need to decrease the size by 40%.

    In addition -  I would like to decrease the size of the Feedback - Message box by 50%. 

    Also Grace - for the article that we reduced the size for earlier - I would like to use the gradient orange color. I can't find where to add the code.

     

  • Hi Bernadette,

    1- I would recommend uploading the PDF file in Files. Then open the file in full screen and copy the URL.

    Add an IFrame widget on a page, and paste the URL in Iframe URL.

    The widget will look like this:

    2- Could you try the following:

    1. Edit the widget
    2. Click the view source button
    3. Reduce the width and height values to 90

    Does this shrink the widget enough?

    3- Please add the following code in CSS Overrides. Let me know if the Message Box widget is small enough after doing this.

    /*Executive Team page - Message Box widget*/
    .executive-team-homepage .axero-widget-message-box h3,
    .executive-team-homepage .axero-widget-message-box p,
    .executive-team-homepage .axero-widget-message-box img {
        margin:0;
    }

    4- The gradient CSS we added earlier was for widget headers. The orange area of the Weekly Executive Updates is a different HTML element and requires different CSS to make it gradient. Please add the following code in CSS Overrides.

    /*Gradient background for XS Newsroom Wide template*/
    .xs-newsroom-wide-columns.hot-pink-orange-exteam-header .xs-content ul li:first-child a .tile-content .tile-content-text {
        background: linear-gradient(90deg, rgba(215, 0, 115, 1) 0%, rgba(241, 91, 65, 1) 50%);
    }

    The code above applies the hot pink/orange gradient for a Content List widget that uses the XS Newsroom Wide template and has hot-pink-orange-exteam-header in custom CSS class. The widget you're working on meets these criteria, so you'll see the change immediately after saving CSS overrides.

    Grace

  • Thank You.....I tried this and it only shrinks the picture which I was able to do before by just editing the image. Reducing it to 90 only affected the picture and not the overall box.

    2- Could you try the following:

    1. Edit the widget
    2. Click the view source button
    3. Reduce the width and height values to 90

    Does this shrink the widget enough?

  • Hi Bernadette,

    I'd like to make some changes to the page to help you reduce the size of the widget. May I edit the page now?

    Grace

Page 2 of 3 (68 items)