Custom CSS/Theme for 1.2.8

Post about your customizations to share with others.

Moderators: Contributor, Developer

empiror
Posts: 2
Joined: Feb 03, 2012 12:42 pm
Location: Belfast, Northern Ireland
Contact:

Custom CSS/Theme for 1.2.8

Post by empiror » Feb 03, 2012 1:04 pm

As a new user, I really love the power and functionality of MantisBT, and the addition of timetracking is a great bonus feature. However, when introducing to colleagues the first impression is that the design is quite garish. I did a bit of work on the CSS using randallj's post as a good starting point. I have used CSS3 gradients, border radii and box shadows to soften the look and feel without the use of any background images (apart from randallj's search button). A few screenshots below demonstrate the changes and the needed files are in the zipped attachment.

I look forward to the theming ability that is rumoured for version 1.3, but in the meantime I hope this is useful for someone out there.
screen1.png
screen1.png (30.66 KiB) Viewed 43108 times
screen3.png
screen3.png (28.42 KiB) Viewed 43108 times
Attachments
Mantis-1.2.8-skin.zip
(5.71 KiB) Downloaded 1970 times

atrol
Site Admin
Posts: 7487
Joined: Mar 26, 2008 4:37 pm
Location: Germany

Re: Custom CSS/Theme for 1.2.8

Post by atrol » Feb 03, 2012 4:31 pm

Thanks for your contribution.
I started to collect some information around this topic.
http://www.mantisbt.org/forums/viewtopi ... =4&t=20127
Please use Search before posting and read the Manual

empiror
Posts: 2
Joined: Feb 03, 2012 12:42 pm
Location: Belfast, Northern Ireland
Contact:

Re: Custom CSS/Theme for 1.2.8

Post by empiror » Feb 04, 2012 11:39 am

I have made a few further changes to the theme including the use of a few open source Google fonts (Oswald and Open Sans), an updated favicon, the addition of themed buttons and I applied internal borders to some of the tables. Again, all the necessary files are attached in a zip file.
screen1.jpg
screen1.jpg (116.74 KiB) Viewed 43079 times
screen2.jpg
screen2.jpg (133.62 KiB) Viewed 43079 times
Attachments
Mantis-1.2.8-theme.zip
(21.21 KiB) Downloaded 1961 times

atrol
Site Admin
Posts: 7487
Joined: Mar 26, 2008 4:37 pm
Location: Germany

Re: Custom CSS/Theme for 1.2.8

Post by atrol » Feb 04, 2012 2:53 pm

Nice look.

I want to write some warnings for users who don't know what is affected by the changes.

You are not longer able to run MantisBT in a pure intranet scenario.
Connection to internet is mandatory when using the changed html_api.php.

Whenever updating MantisBT to a version > 1.2.8 do not copy the attached files over the ones which were delivered by MantisBT.
You have to apply the changes to the newer versions that come with MantisBT.
If you use the attached files after updating you might not get all bug fixes and enhancements.
Maybe you will get issues because something in MantisBT has been changed which is not compatible with the changes in the attached files.
Please use Search before posting and read the Manual

mykbaker
Posts: 16
Joined: Jul 02, 2009 8:14 am

Re: Custom CSS/Theme for 1.2.8

Post by mykbaker » May 24, 2012 8:14 pm

Wow, this is really good! Can't the fonts be downloaded from googleapis.com and included directly? As long as the link can be broken to an external site I say this should immediately become the look for 1.2.x. Why wait for 1.3 to get something everyone wants?

kelson
Posts: 32
Joined: Mar 01, 2011 6:02 am

Re: Custom CSS/Theme for 1.2.8

Post by kelson » Aug 31, 2012 3:22 am

What do you think about a plugin which swaps all the CSS attributes by using a javascript script ?
In my opinion, the bootstrap Twitter is the most efficient CSS framework, therefore I will use this one in my skinning plugin.

Let's me show you the result.
Attachments
mantis_style.PNG
mantis_style.PNG (65.19 KiB) Viewed 41132 times

dimasdwika
Posts: 1
Joined: Sep 08, 2012 9:05 am

Re: Custom CSS/Theme for 1.2.8

Post by dimasdwika » Sep 08, 2012 9:12 am

Hi,

just wondering, how do you integrate with twitter bootstrap?

and which plugin is that? seems that's what I'm looking for.


Cheers,

lukesky333
Posts: 1
Joined: Oct 19, 2012 6:10 am

Re: Custom CSS/Theme for 1.2.8

Post by lukesky333 » Oct 19, 2012 6:15 am

@kelson:

could you tell me, which style/theme/css you are using on this image? its very cool and i want to use it too (if possible).

thanks,
~lukesky

goeck
Posts: 1
Joined: Nov 23, 2012 4:29 am

Re: Custom CSS/Theme for 1.2.8

Post by goeck » Nov 23, 2012 5:33 am

Hey,

just installed Mantis, coming from Traq and TheBugGenie. Now I found the bootstrap theme... I can't download it, Links is broken. Could somebody supply it somewhere else? I really want this UI!

Thanks in advance.

Cheers
Stefan

kelson
Posts: 32
Joined: Mar 01, 2011 6:02 am

Re: Custom CSS/Theme for 1.2.8

Post by kelson » Apr 05, 2013 9:42 am

Sorry everyone who has downloaded it.
I didn't verify if everything was OK in the plugin.

I am back at my office, so, here are the correct plugins.
Attachments
jQuery.zip
(33.76 KiB) Downloaded 1104 times
CSSFramework.zip
(85.33 KiB) Downloaded 1237 times

Louisvdw
Posts: 2
Joined: Jun 06, 2013 2:14 am

Re: Custom CSS/Theme for 1.2.8

Post by Louisvdw » Jun 06, 2013 2:20 am

I updated the custom theme from the opening post to include all the changes from the latest MantisBT release (V1.2.15)
Attachments
Mantis-1.2.15-theme.zip
(19.55 KiB) Downloaded 1711 times

jolienai
Posts: 1
Joined: Feb 03, 2014 7:27 am

Re: Custom CSS/Theme for 1.2.8

Post by jolienai » Feb 03, 2014 7:34 am

Hi kelson,
I use version 1.2.15 and how do I use the theme?

dharmalingam
Posts: 2
Joined: Mar 19, 2014 10:59 pm

Re: Custom CSS/Theme for 1.2.8

Post by dharmalingam » Mar 20, 2014 2:39 am

Themes not working. Do you have any other themes.

dharmalingam
Posts: 2
Joined: Mar 19, 2014 10:59 pm

Re: Custom CSS/Theme for 1.2.8

Post by dharmalingam » Mar 20, 2014 4:25 am

i need Theme for mantis 1.2.17

maximkletsov
Posts: 1
Joined: May 08, 2014 4:22 am

Re: Custom CSS/Theme for 1.2.8

Post by maximkletsov » May 08, 2014 4:28 am

kelson wrote:What do you think about a plugin which swaps all the CSS attributes by using a javascript script ?
In my opinion, the bootstrap Twitter is the most efficient CSS framework, therefore I will use this one in my skinning plugin.

Let's me show you the result.
Hi there!
I really appreciate your work. 8)
What about to make a new skin based on new version of bootstrap?
Looking forward to it!

Post Reply