Countdown widget size and layout

  • Unknown's avatar
    voyagista · Member ·

    I have managed to change the colour of the countdown widget but i would like to change the size (make is smaller) and the layout (I have two one below the other, i want to put 4, two per line on two line). Does anybody know the css code i need to use for this?

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

  • Unknown's avatar
    designsimply · Member ·

    I checked http://voyagista.com/ and I see that you have only added one countdown widget so far. Here is a very basic example that will make the width smaller:

    .milestone-widget {
	float: left;
	width: 140px;
}

    Because of the “float” property in that rule, any widget added after if that’s a similar width will stack horizontally if there is enough space. Try adding a second countdown widget to see what I mean.

    Note that you may also need to adjust the font size if you adjust the width like this.

  • Unknown's avatar
    voyagista · Member ·

    Hi
    Thanks a lot that seems to work. I have made changes on voyagista.fr
    However now I do need to adjust the font size and how do I do this?
    Once I reduce the font if i put height:200px, will that reduce the height properly?
    Thanks

  • Unknown's avatar
    designsimply · Member ·

    However now I do need to adjust the font size and how do I do this?

    Here is a copy of all of the CSS that is used for the milestone widget. What you can do is change the values for the parts you want to adjust and then delete all the other lines.

    .milestone-widget {
	margin-bottom: 1em;
}
.milestone-content {
	line-height: 2;
	margin-top: 5px;
	max-width: 17em;
	padding: 0;
	text-align: center;
}
.milestone-header {
	background-color: #ffffff;
	color: #e9e9e9;
	line-height: 1.3;
	margin: 0;
	padding: .8em;
}
.milestone-header .event,
.milestone-header .date {
	display: block;
}
.milestone-header .event {
	font-size: 120%;
}
.milestone-countdown .difference {
	display: block;
	font-size: 500%;
	font-weight: bold;
	line-height: 1.2;
}
.milestone-countdown,
.milestone-message {
	background-color: #e9e9e9;
	border: 1px solid #333333;
	border-top: 0;
	color: #ffffff;
	padding-bottom: 1em;
}
.milestone-message {
	padding-top: 1em
}

    Based on the code above, if you want to just pull out any rules related to font size and change them, you would end up with a finished set of CSS like this:

    .milestone-header .event {
	font-size: 60%;
}
.milestone-countdown .difference {
	font-size: 250%;
}

    I reduced the font size by half in that example.

  • Unknown's avatar
    designsimply · Member ·

    Once I reduce the font if i put height:200px, will that reduce the height properly?

    I tested it and adding height:200px to .milestone-widget worked pretty well if the font size was cut in half. Of course, what value to put for the height will depend on the font size you chose. You will need to experiment to find the best fit.

  • Unknown's avatar
    voyagista · Member ·

    Perfect. last question, how to I get rid of the space (see on voyagista.fr) in between the two lines of countdown, it looks strange to have this empty square. Thanks

  • Unknown's avatar
    designsimply · Member ·

    how to I get rid of the space (see on voyagista.fr) in between the two lines of countdown

    I think you just have to fiddle with the numbers in a case like this.

    Based on how you’ve changed the font size, you might try the following:

    Find this in your custom CSS:

    .milestone-widget {
	float: left;
	width: 140px;
	height: 220px;
}

    And replace it with this:

    .milestone-widget {
	float: left;
	width: 49.5%;
	height: 183px;
	margin: 0;
}

.milestone-widget .widget-wrap {
	padding: 20px;
	height: 140px;
}

    Note that if the fonts change again, you may also need to adjust these two height values accordingly.

  • The topic ‘Countdown widget size and layout’ is closed to new replies.