SHARE
TWEET

minimalist profile v1 by alxq #9085

a guest Apr 26th, 2017 112 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Minimalist Profile by alxq #9085
  2.  
  3. THINGS YOU'D NEED:
  4. + a background image url, preferably at least 2000 x 2000 pixels
  5. + two colors to complement your background (in RGB form)
  6. - color one, the MAIN body color, will be denoted as ###
  7. - color two, the COMPLIMENTARY color, will be denoted as ***
  8. - color two hover, the darker version of color two, will be denoted as %%%
  9.  
  10. OPTIONAL THINGS:
  11. - if your main body color is LIGHT, as in very light pink or yellow:
  12.     - please change "color: #fff;" into "color: #000;" for readability on your profile
  13. or some other dark color in order for your body text to be seen properly
  14. - if your main body color is DARK, as in very dark blue or red, there's no need to change
  15. "color: #fff;" or some other light color
  16. - logos (big on top, small on bottom), the icons and villagers on the bottom are all
  17. optional
  18. - the village shield animation is also optional
  19. - you may take out hovers if you like, or adjust them accordingly
  20.  
  21. YOU MAY:
  22. - edit to hell and back
  23. - use snippets to make your own frankenstein
  24. - credit minor edits done by you as long as you credit me for the base code
  25. - share with friends
  26.  
  27. YOU MAY NOT:
  28. - claim it (fully) as your own
  29. - SELL EDITS OF THIS CODE
  30.  
  31. RGB form should look like this (xxx,xxx,xxx)
  32. there will be parts where the form is rgba(xxx,xxx,xxx,0.#)
  33. in this case, simply replace the three sets of xxx in their
  34. respective order and leave the last number alone
  35. here's a site to find rgb values of a color:
  36. http://www.javascripter.net/faq/hextorgb.htm
  37.  
  38. if you are unsure about something, please message #9085 on Furvilla */
  39.  
  40. /* UNIVERSAL TRANSITIONS */
  41. * {
  42.     transition: 1s;
  43. }
  44.  
  45. /*  SEMIOPAQUE BACKGROUND */
  46. .report a,
  47. .widget-content,
  48. .user-comments .user-comment,
  49. .content .textarea + .btn,
  50. .content .textarea,
  51. .gallery-header .btn-link,
  52. .panel,
  53. .villagers-list,
  54. .user-data,
  55. .alert.success,
  56. .alert.alert,
  57. .alert,
  58. .notifications .btn,
  59. .recent-posts .forum-posts li:nth-child(odd),
  60. .user-panel.clearfix {
  61.     background: rgba(###,###,###, 0.8);
  62. }
  63.  
  64. /* OPAQUE BACKGROUND */
  65. .report a:hover,
  66. .content .textarea + .btn:hover,
  67. .gallery-header .btn-link:hover,
  68. .notifications .btn,
  69. .search-form .input,
  70. .widget-header h3,
  71. .dropdown-menu,
  72. #logo+:nth-child(2) {
  73.     background: rgb(###,###,###);
  74. }
  75. .content .active span,
  76. .table tr:hover td,
  77. .dropdown-menu .multi-column-dropdown li a:hover {
  78.     background: rgb(###,###,###) !important;
  79. }
  80.  
  81. /* WHITE TEXT */
  82. div.bottom,
  83. .widget-content,
  84. .user-info h4,
  85. .content .pagination > .disabled > span,
  86. .content .pagination > .disabled > span:hover,
  87. .content .pagination > .disabled > span:focus,
  88. .content .pagination > .disabled > a,
  89. .content .pagination > .disabled > a:hover,
  90. .content .pagination > .disabled > a:focus,
  91. .content .textarea,
  92. .content,
  93. .search-form .input {
  94.     color: #fff;
  95. }
  96. .content .pagination a,
  97. .gallery-header .btn-link,
  98. .alert.success,
  99. .alert.alert,
  100. .alert,
  101. .dropdown-menu .multi-column-dropdown li a {
  102.     color: #fff !important;
  103. }
  104.  
  105. /* WEBPAGE BACKGROUND */
  106. .content:after {
  107.     background: url('BACKGROUND URL HERE');
  108.     height: 100%;
  109.     background-size: cover;
  110.     position: fixed;
  111.     top: 0;
  112.     z-index: -1;
  113. }
  114.  
  115. /* UNIVERSAL LINK */
  116. a {
  117.     color: rgb(***,***,***);
  118. }
  119. a:hover, a:focus, a:active {
  120.     color: rgb(%%%,%%%,%%%);
  121.     text-decoration: none;
  122. }
  123.  
  124. /* LOGO IMAGE (BIG)
  125. you can remove this section if you don't
  126. want to change the big logo on top */
  127. #logo a {
  128.     background: url('LOGO IMAGE HERE') no-repeat;
  129. }
  130.  
  131. /* SEARCH FORM */
  132. .search-form .input {
  133.     border: none;
  134. }
  135.  
  136. /* DROPDOWN MENU */
  137. .dropdown-menu .multi-column-dropdown li a:hover {
  138.     background: #fff;
  139. }
  140.  
  141. /* USER PANEL NAV */
  142. .user-panel.clearfix {
  143.     border-radius: 0 0 10px 10px;
  144. }
  145.  
  146. /* USER DATA HEADER TEXT, PROFILE DESCRIPTION HEADER TEXT
  147. (VIEWING ...'S PROFILE) */
  148. .content h1, .user-header {
  149.     display: none;
  150. }
  151.  
  152. /* WEBPAGE GENERAL CSS */
  153. .content {
  154.     background: none;
  155.     margin-bottom: 100px;
  156.     padding: 20px;
  157. }
  158.  
  159. /* NOTIFICATIONS TABLE */
  160. .table tr:nth-child(even) td,
  161. .table tr:nth-child(odd) td {
  162.     background: none;
  163.     border: none;
  164.     padding: 10px 13px;
  165. }
  166.  
  167. /* NOTIFICATIONS BUTTONS*/
  168. .notifications .btn {
  169.     text-transform: uppercase;
  170.     font-size: 11px;
  171. }
  172.  
  173. /* NOTIFICATIONS TEXT (NON LINKS) */
  174. tbody b {
  175.     font-weight: normal;
  176. }
  177.  
  178. /* TOP BANNER AD */
  179. .left-column .text-center.margin-10px {
  180.     display: none;
  181. }
  182.  
  183. /* HEADERS */
  184. .content h2 {
  185.     font-size: 16px;
  186.     text-transform: uppercase;
  187.     color:  #fff;
  188.     text-align: center;
  189. }
  190.  
  191. /* VILLAGE SHIELD ANIMATION (it bobs up and down slowly)
  192. you may remove this section if you like */
  193. .village-shield {
  194.     animation: bob 1.0s ease-out infinite;
  195.     position: relative;
  196.     padding: 20px;
  197. }
  198. @keyframes bob {
  199.     0% {
  200.         top: 5px;
  201.     }
  202.     50% {
  203.         top: 8px;
  204.     }
  205.     100% {
  206.         top: 5px;
  207.     }
  208. }
  209.  
  210. /* USER DATA */
  211. .user-data {
  212.     border-radius: 20px;
  213. }
  214.  
  215. /* QUICK LINKS */
  216. .user-links {
  217.     margin: 0;
  218.     padding: 0;
  219. }
  220.  
  221. /* USER INFO, TROPHIES */
  222. .col-xs-7, .col-xs-5 {
  223.     padding: 20px;
  224. }
  225.  
  226. /* TROPHIES TEXT */
  227. .trophies-header {
  228.     text-transform: uppercase;
  229.     font-size: 14px;
  230. }
  231.  
  232. /* TROPHIES IMAGES */
  233. .trophies .row img {
  234.     max-width: 50px;
  235.     padding-left: 0;
  236.     padding-right: 0;
  237. }
  238.  
  239. /* PROFILE DESCRIPTION BODY TEXT */
  240. .user-data .user-desc {
  241.     padding: 30px;
  242.     margin: 0;
  243. }
  244.  
  245. /* VILLAGERS */
  246. .content .villagers-list {
  247.     padding: 20px;
  248.     border-radius: 20px;
  249.     max-height: 190px;
  250.     transition: 3s;
  251.     overflow: hidden;
  252. }
  253. .villagers-list:hover {
  254. // adjust this accordingly
  255. // more villagers, bigger pixel height
  256.     max-height: 1300px;
  257. }
  258.  
  259. /* GALLERY */
  260. .gallery {
  261.     max-height: 160px;
  262.     overflow: hidden;
  263. }
  264. .panel {
  265.     border-radius: 20px;
  266.     border: none;
  267. }
  268.  
  269. /* GALLERY ITEM TEXT */
  270. .name {
  271.     display: none;
  272. }
  273.  
  274. /* GALLERY BUTTON */
  275. .gallery-header .btn-link {
  276.     font-weight: normal;
  277. }
  278.  
  279. /* COMMENT FORM */
  280. .content .textarea {
  281.     border: none;
  282. }
  283.  
  284. /* POST BUTTON */
  285. .content .textarea + .btn {
  286.     text-transform: uppercase;
  287. }
  288.  
  289. /* USER COMMENTS */
  290. .user-comments {
  291.     height: 300px;
  292.     overflow: auto;
  293. }
  294.  
  295. /* USER COMMENTS BODY */
  296. .user-comments .user-comment {
  297.     width: 550px;
  298.     border: none;
  299. }
  300. .user-comments .user-comment .footer {
  301.     width: 515px;
  302. }
  303. .user-comments .user-comment:after,
  304. .user-comments .user-comment:before {
  305.     border-right-color: rgba(###,###,###, .553);
  306. }
  307.  
  308. /* USER COMMENTS AVATARS */
  309. .user-avatar-wrapper img {
  310.     margin: 10px;
  311.     border-radius: 47px;
  312.     width: 60px;
  313. }
  314.  
  315. /* PAGINATION */
  316. .content .pagination a {
  317.     background: rgba(###,###,###, .5) !important;
  318.     border: 0 !important;
  319. }
  320. .content .pagination a:hover {
  321.     background: rgba(###,###,###, .7) !important;
  322. }
  323. .content .active span {
  324.     z-index: 3;
  325.     border: 0 !important;
  326. }
  327. .content .pagination > .disabled > span,
  328. .content .pagination > .disabled > span:hover,
  329. .content .pagination > .disabled > span:focus,
  330. .content .pagination > .disabled > a,
  331. .content .pagination > .disabled > a:hover,
  332. .content .pagination > .disabled > a:focus {
  333.     background-color: rgba(###,###,###, .2) !important;
  334.     border: 0 !important;
  335. }
  336.  
  337. /* "HI, USERNAME" */
  338. .user-info h4 {
  339.     text-transform: uppercase;
  340. // you may choose a different font family for this
  341.     font: 13px 'Helvetica';
  342.     padding-top: 5px;
  343.     padding-bottom: 5px;
  344. }
  345.  
  346. /* USER PANEL BODY TEXT */
  347. .right-column .widget .user-info p {
  348.     text-transform: uppercase;
  349. // you may choose a different font family for this
  350.     font: 11px 'Helvetica';
  351. }
  352.  
  353. /* WIDGET BODY */
  354. .widget-content {
  355.     border-radius: 0 0 20px 20px;
  356. }
  357.  
  358. /* WIDGET HEADER (blue border) */
  359. .content .widget-header {
  360.     border-bottom: none;
  361. }
  362.  
  363. /* WIDGET HEADER */
  364. .widget-header h3 {
  365.     border-radius: 20px 20px 0 0;
  366.     margin: 0;
  367.     padding: 10px 0 5px;
  368.     text-align: center;
  369.     text-shadow: none;
  370.     font-weight: normal;
  371.     color: rgb(***,***,***);
  372.     text-transform: uppercase;
  373. // you may choose a different font family for this
  374.     font: 12px 'Helvetica';
  375.     border-bottom: 1px dotted #888;
  376. }
  377.  
  378. /* VIEW MORE BUTTONS */
  379. .right-column .btn-link {
  380.     color: rgb(***,***,***) !important;
  381. }
  382. .right-column .btn-link:hover {
  383.     color: rgb(%%%,%%%,%%%) !important;
  384. }
  385.  
  386. /* RECENT ACTIVITY */
  387. .recent-posts .widget-content {
  388.     padding-bottom: 5px;
  389. }
  390. .recent-posts .forum-posts li:nth-child(even) {
  391.     background: none;
  392. }
  393.  
  394. /* USER PANEL ICON */
  395. .right-column .text-center img {
  396.     border-radius: 20px;
  397. }
  398.  
  399. /* LOGO IMAGE (SMALL, BOTTOM)
  400. you may comment/delete this section if you like */
  401. .logo-small {
  402.     width: 110px;
  403.     overflow: hidden;
  404.     padding-left: 110px;
  405.     background: url('SMALL LOGO IMAGE URL HERE') center no-repeat !important;
  406. }
  407.  
  408. /* VILLAGER IMAGE (BOTTOM)
  409. you may comment/delete this section if you like */
  410. .pets {
  411.     width: 269px;
  412.     overflow: hidden;
  413.     padding-left: 269px;
  414.     background: url('PETS IMAGE URL HERE');
  415. }
  416.  
  417. /* SOCIAL MEDIA ACCOUNTS LINKS (BOTTOM)
  418. you may comment/delete this section if you like*/
  419. .social a {
  420.     width: 44px;
  421.     height: 44px;
  422.     display: inline-block;
  423. }
  424. .social img {
  425.     display: none;
  426. }
  427. .social a:first-child {
  428.     background: url('FACEBOOK ICON IMAGE URL HERE');
  429. }
  430. .social a:nth-child(2) {
  431.     background: url('TWITTER ICON IMAGE URL HERE');
  432. }
  433. .social a:last-child {
  434.     background: url('TUMBLR ICON IMAGE URL HERE');
  435. }
  436.  
  437. /* FLOATING REPORT USER PROFILE */
  438. .report a {
  439.     position: fixed;
  440.     bottom: 30px;
  441.     left: 30px;
  442.     color: rgb(169, 68, 66);
  443.     border-radius: 5px;
  444.     padding: 5px;
  445. }
  446. .report a:hover {
  447.     color: #ed1c24;
  448. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top