Wednesday, February 22, 2012

How to identify and remove border radius from all individual elements

What started out as an exercise to try and remove all the radius so I had a blank slate to start from, turned into a full scale hunt for all the border radius throughout the whole style.

If you want to remove it from every single element individually, then in addition to removing it from all Style Properties groups, you need to add the code below to EXTRA.css.

Code:
/* Navigation tab pop-up*/
.Popup .PopupControl.PopupOpen,
.Popup.PopupContainerControl.PopupOpen {
border-radius: 0;
}
 
/* Alerts list pop-up*/
.navPopup .PopupItemLinkActive:hover {
border-radius: 0;
}
 
/* Search */
#QuickSearch {
border-radius: 0;
}
 
#QuickSearch .commonSearches li a {
border-radius: 0 !important;
}
 
.formPopup .controlsWrapper {
border-radius: 0;
}
 
 
.formPopup .advSearchLink {
border-radius: 0 !important;
}
 
ul.autoCompleteList li:hover,
ul.autoCompleteList li.selected {
border-radius: 0;
}
 
/* Search calendar */
#calroot {
border-radius: 0;
}
 
.calweek a {
border-radius: 0;
}
 
/* Page node navigation */
#pageNodeNavigation {
border-radius: 0 !important;
}
 
/* Thread view */
.thread_view .threadAlerts {
border-radius: 0 !important;
}
 
.thread_view .threadNotices {
border-radius: 0 !important;
}
 
/* Small button, e.g. "Add Additional Response" */
.button.smallButton {
border-radius: 0;
}
 
/* Uploader */
.AttachmentEditor .AttachedFile .ProgressMeter {
border-radius: 0 !important;
}
 
/* Poll icon */
.pollBlock .questionMark {
border-radius: 0 !important;
}
 
/* Poll options */
.pollBlock .pollOption label:hover {
border-radius: 0 !important;
}
 
/* Filter */
.discussionListFilters .removeFilter,
.discussionListFilters .removeAllFilters {
border-radius: 0 !important;
}
 
/* Locked thread */
.thread_view .threadAlerts {
border-radius: 0 !important;
}
 
/* Smiley list on Help page */
.smilieList .smilieText {
border-radius: 0 !important;
}
 
/* BB Code on Help page */
.bbCode dl dd {
border-radius: 0 !important;
}
 
/* Important message */
p.importantMessage {
border-radius: 0;
}
 
/* Account sidebar */
.textWithCount.subHeading .count {
border-radius: 0 !important;
}
 
/* Conversation message */
.conversation_view .messageList {
border-radius: 0 !important;
}
 
/* Links */
.emCtrl,
.messageContent a {
border-radius: 0 !important;
}
 
/* Overlay*/
.xenOverlay .formOverlay .heading {
border-radius: 0;
}
 
/* Ajax alerts */
#StackAlerts .stackAlert {
border-radius: 0;
}
 
#StackAlerts .stackAlertContent {
border-radius: 0;
}
 
/* Moderator bar */
#moderatorBar a {
border-radius: 0 !important;
}
 
/* Moderation queue and reported items alerts */
#moderatorBar .itemCount {
border-radius: 0 !important;
}
 
#moderatorBar .itemCount.alert {
border-radius: 0;
}
 
/* Inline edit */
.inlineCtrlGroup .textCtrl {
border-radius: 0 !important;
}
 
/* Error overlay */
.xenOverlay .errorOverlay {
border-radius: 0;
}
 
.xenOverlay .errorOverlay .heading {
border-radius: 0;
}
 
/* Inline error form */
.formValidationInlineError {
border-radius: 0;
}
 
/* Forum error message */
.errorPanel {
border-radius: 0;
}
 
/* More messages */
.messageList .newMessagesNotice {
border-radius: 0 !important;
}
 
/* Avatar editor */
.AvatarEditor .avatarOption {
border-radius: 0 !important;
border: 1px solid @primaryDarker !important;
}
 
/* Attachments */
.attachment .boxModelFixer {
border-radius: 0 !important;
}
 
.chooserColumns li a {
border-radius: 0 !important;
}
 
.chooserColumns .icon {
border-radius: 0 !important;
}
 
/* Visitor information */
#visitorInfo {
border-radius: 0 !important;
}
 
/* Simple message */
.messageSimpleList .placeholder .placeholderContent {
border-radius: 0 !important;
}
 
/* Lightbox */
.xenOverlay.lightBox .formOverlay {
border-radius: 0 !important;
}
 
.xenOverlay.lightBox #LbUpper {
border-radius: 0 !important;
}
 
.xenOverlay.lightBox #LbLower {
border-radius: 0 !important;
}
 
.lightBox .avatar img {
border-radius: 0 !important;
}
 
.lightBox .imageContainer .imageCount {
border-radius: 0 !important;
}
 
.lightBox .imageNav .ctrl {
border-radius: 0 !important;
}
 
.lightBox .thumbsContainer {
border-radius: 0 !important;
}

I'm 99% certain that's all of it, but if I find any stragglers, I'll update the code.
Update: I've been through every css template now so I'm fairly sure that's everything.

Edit: As per sadikb's post here http://xenforo.com/community/threads/clip-the-apex.19440/page-2#post-317139, yes you can completely remove it with a single line of code like so:
Code:
* {
border-radius: 0 !important;
}
That however doesn't tell you where it all is or give you control over each individual element, allowing you to selectively remove or apply it where required.

No comments:

Post a Comment