Sidebar in Eris theme

  • Unknown's avatar
    9thartwave · Member ·

    Hi,

    I have a couple of questions regarding the sidebar

    1) How can I edit the width of the sidebar, so that the text is not wrapped but goes in 1 line?

    2) Can I edit the text (place it to the centre, make it bold, italics, etc?)

    3) Regarding the events, how can I decrease the font size, add a link and remove the ”no upcoming events” text?

    4) Regarding the mailchimp pop up
    I keep pasting the code but wordpress does not accept it. This is what I paste

    [mailchimp_subscriber_popup baseUrl='mc.us7.list-manage.com' uuid='abb4b42d4baf3fbb5b0c94a0b' lid='27ebe533f3' usePlainJson='true' isDebug='false']

    On top of that, how can I have the pop-up window to be on the low right corner instead of the center of the screen?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    This will widen the widgets in the slideout sidebar. 

    body.theme-menu-maximized .widget-area .widget {
	width: 100% !important;
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

    On the font size in the upcoming events, I’m seeing it quite small already. Also, I’m not sure if you are wanting to decrease the title or the content within the event widget. To reduce the title size, add the following and adjust as desired. 

    #upcoming_events_widget-3 .widget-title {
	font-size: .625rem;
	font-weight: bold;
	font-style: italic;
}

    If you are wanting to decrease the content in the event widget, add the following and adjust as desired. 

    #upcoming_events_widget-3 p {
	font-size: .875rem;
	font-weight: bold;
	font-style: italic;
}

    The way the event widget works, the “No upcoming events” text is placed there by the software when there aren’t any events. If we hide that, then when you add events they will not show as they are placed in the same element within the widget.

    On the mail chimp widget, I tried signing up with it and it went through, so it appears you have that taken care of. To move it to the bottom right, add the following to your custom CSS. 

    .mc-modal {
    margin-right: 12px !important;
    top: auto !important;
}
  • Unknown's avatar
    9thartwave · Member ·

    To be honest, I do not know what is happening, maybe it needs time to adjust the changes, or it is slow responsive…

    I pasted almost all the codes you have sent but

    1) Text width in sidebar has not changed
    2) The widget is randomly poping up
    3) The blog’s title came back in 2lines, although i applied the CSS code

    Btw, how can I edit the text in the sidebar (not the events, but the text – I have 2 text widgets i would like to edit)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, did you switch your contact information from a text widget to the Contact Info widget? I was thinking you were using a text widget for that?

    In your custom CSS, I see you have added some headings for the different parts of the CSS. You need to add those as a comment instead with some special characters otherwise it causes a syntax error and none of your custom CSS will load. Make those three headings look like this. 

    /*FOOTER WIDGET*/

/*SLIDER SIZE*/

/*SIDEBAR*/

    To edit the text widgets, go to Customize > Widgets, click on the sidebar the widget you wish to edit is in, and then click on the widget to open it and you can then edit the content and save.

    Change the CSS rule I had given you for the site title to this. 

    @media screen and (max-width: 4000px) and (min-width: 500px) {
	.site-branding {
		max-width:350px !important;
		width:100%;
		padding-right:0 !important;
		display: block;
	}
}
  • Unknown's avatar
    thesacredpath · Member ·

    Fixing the labels you put into your CSS should fix the widget issues.

    On your contact widget, this will put all the text on screens/windows 1100px and wider.

    First replace these two CSS rules with the following. 

    .site-footer .col-sm-6:first-child {
	float:left;
	width:25%;
}
.site-footer .col-sm-6:last-child {
	float:right;
	width:70%;
}

    and then add this since you are now using the contact widget. 

    #widget_contact_info-5 {
	width: 100%;
	max-width: 100%;
	text-align: right;
}
  • Unknown's avatar
    9thartwave · Member ·

    ok, I am bit confused but I guess this is my fault.

    To simplify, I will use the text widget and not the contact one (always talking for the footer widget)

    This is what I have in the footer widget at the moment

    .site-footer .col-sm-7 {
    width: 100%;
    }
    .site-footer .col-sm-6:first-child {
    float:left;
    width:25%;
    }
    .site-footer .col-sm-6:last-child {
    float:right;
    width:70%;
    }

    .site-footer .col-sm-6 #text-8 {
    float: center;
    width: 100%;
    max-width: 100%;
    }

    .site-footer .col-sm-5 {
    width: 100%;
    text-align: right;
    }

    But still the text does not go into 1 line…am I missing sth?

    What I want is the text ((email visible only to moderators and staff) | ….) to go into 1 line and if possible in the center of the widget pic and in the center of the page (to create a kind of visual symmetry)

  • Unknown's avatar
    9thartwave · Member ·

    Moreover, 2 more things

    1) the mail chimp pop up is still not appearing

    I paste the code generated from mailchimp, which is the below
    <script type=”text/javascript” src=”//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js” data-dojo-config=”usePlainJson: true, isDebug: false”></script><script type=”text/javascript”>require([“mojo/signup-forms/Loader”], function(L) { L.start({“baseUrl”:”mc.us7.list-manage.com”,”uuid”:”abb4b42d4baf3fbb5b0c94a0b”,”lid”:”27ebe533f3″}) })</script>

    But it is automatically replaced by this when I save and publish
    [mailchimp_subscriber_popup baseUrl='mc.us7.list-manage.com' uuid='abb4b42d4baf3fbb5b0c94a0b' lid='27ebe533f3' usePlainJson='true' isDebug='false']

    2) How can I increase the text in the side bar (PANOS ANTONOPOULOS | CONCEPTUAL ARTIST)

  • Unknown's avatar
    thesacredpath · Member ·

    I’m looking at your site right now and the text in that widget is in one line. At about 1150px and narrower, the text will begin to flow onto two lines because there simply isn’t enough room for it to stay on one line.

    The Mail Chimp widget, once you dismiss it, or subscribe, will never show up again until the browser cache and cookies have been cleared. I’m seeing your widget just fine at the lower right after I have cleared my browser cache and cookies.

    Log out of WordPress, clear your browser cache and cookies, and then visit your site and you will see the newsletter subscribe popup again. WordPress takes the code that you insert from mailchimp and converts it to what we need here at WordPress.com, so yes, that change you see is correct and intentional.

    To increase the widget title on the sidebar top widget, add the following and adjust as desired. 

    #text-5 .widget-title {
	font-size: 200%;
}
  • Unknown's avatar
    9thartwave · Member ·

    weird…I checked both in a mac and a toshiba and it appears in 2 lines..we are talking about the footer widget, right? Not the sidebar

    Got it for the mailchimp!! Just for my understanding, this will happen to anyone who has not cleared his/her cache?

    Thanks for the title size as well!!!

    Btw how can I have a hyperlink on my events? I did add one in the iCalendar feed URL, but apparently it is not the right place

  • Unknown's avatar
    9thartwave · Member ·

    Moreover, how can I add 2 events, but to appear one close to the other?

    I have added 2 now, but they are with different widgets…Can I add 2 in the same widget?

  • Unknown's avatar
    9thartwave · Member ·

    sorry, for fullin the post, but questions just coming

    How can I edit the size in the 2nd event, as we did before? I tried to use the same code, but apparently it does not work

    #upcoming_events_widget-3 .widget-title {
    font-size: .7rem;
    font-weight: REGULAR;
    font-style: REGULAR;
    }

    #upcoming_events_widget-2 p {
    font-size: .01rem;
    font-weight: bold;
    font-style: italic;
    }

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, it looks like you have two upcoming events widgets in the sidebar. One has an id of 3, and the other one has an id of 8. If you wish to affect both of them with this code, you will need to include the CSS selector for each like this. 

    #upcoming_events_widget-3 .widget-title, #upcoming_events_widget-8 .widget-title {
	font-size:.7rem;
	font-weight:REGULAR;
	font-style:REGULAR
}
#upcoming_events_widget-3 p, #upcoming_events_widget-8 p {
	font-size:.01rem;
	font-weight:700;
	font-style:italic
}
  • Unknown's avatar
    9thartwave · Member ·

    thanks for that, but

    1) How can I make them come closer one to the other? Is there a way to add more events under a sole events widget?

    2) How can I hyperlink them

    3) the text in the footer widget is still under 2 lines

  • Unknown's avatar
    thesacredpath · Member ·

    On Events, please read through our Events Widget support page, which has information about the requirements and setting things up. You will need a Google calendar set up with your events. The support page I’ve linked to has more information on that.

    On the widget spacing, that is part of the Eris design, but you can override that with the following CSS. 

    .widget + .widget {
margin-top: 6.25rem;
}

    You can adjust the 6.25rem value as desired.

    On the text widget, at some width the string of text is going to be two lines as it is longer than an iphone in landscape more, so somewhere around 500px and narrower, it is ging to be two lines. The sidebar area with the image, and the sidebar area with the text widget live side-by-side. We can force them to both go full width and the text will be below the image. Add this to the bottom of your custom CSS to see what this looks like, but at 500px and narrower, the line of text will still go to two lines, and on small mobiles in portrait orientation, it may go to three lines. 

    .site-footer .col-sm-6:first-child {
	float:left;
	width:100%;
}
.site-footer .col-sm-6:last-child {
	float:right;
	width:100%;
}
#image-5 {
	width: 150px !important;
	margin-left: auto;
	margin-right: auto;
	float: none;
}
#image-5 img {
	margin-right: 0 !important;
}
.site-footer .col-sm-5 {
	text-align: center !important;
	padding: 0;
}

    If you decide to use the above, scroll up in your custom CSS, find these CSS rules and remove them. 

    .site-footer .col-sm-6:first-child {
	float:left;
	width:25%
}
.site-footer .col-sm-6:last-child {
	float:right;
	width:70%
}
.site-footer .col-sm-6 #text-8 {
	float:center;
	width:100%;
	max-width:100%
}
.site-footer .col-sm-5 {
	width:100%;
	text-align:right
}
  • The topic ‘Sidebar in Eris theme’ is closed to new replies.